diff --git a/packages/theme/src/action-menu/vars.less b/packages/theme/src/action-menu/vars.less index 877651b49..8380a66cd 100644 --- a/packages/theme/src/action-menu/vars.less +++ b/packages/theme/src/action-menu/vars.less @@ -12,31 +12,31 @@ .component-css-vars-action-menu() { // 下拉触发源文本颜色 - --ti-action-menu-text-color: var(--ti-common-color-text-link); + --ti-action-menu-text-color: var(--ti-common-color-text-link, #526ecc); // 下拉触发源文本禁用色 - --ti-action-menu-item-disabled-text-color: var(--ti-common-color-text-disabled); + --ti-action-menu-item-disabled-text-color: var(--ti-common-color-text-disabled, #adb0b8); // 下拉触发源文本字号 - --ti-action-menu-font-size: var(--ti-common-font-size-base); + --ti-action-menu-font-size: var(--ti-common-font-size-base, 12px); // 分割线颜色 - --ti-action-menu-item-line-bg-color: var(--ti-common-color-line-dividing); + --ti-action-menu-item-line-bg-color: var(--ti-common-color-line-dividing, #dfe1e6); // 下拉菜单项悬浮背景色 - --ti-action-menu-item-hover-bg-color: var(--ti-common-color-transparent); + --ti-action-menu-item-hover-bg-color: var(--ti-common-color-transparent, transparent); // 下拉菜单项文本悬浮色 - --ti-action-menu-item-hover-text-color: var(--ti-common-color-text-link-hover); + --ti-action-menu-item-hover-text-color: var(--ti-common-color-text-link-hover, #344899); // 下拉菜单项顶部内边距 - --ti-action-menu-item-padding-top: var(--ti-common-space-0); + --ti-action-menu-item-padding-top: var(--ti-common-space-0, 0px); // 下拉菜单项右侧内边距 - --ti-action-menu-item-padding-right: var(--ti-common-space-0); + --ti-action-menu-item-padding-right: var(--ti-common-space-0, 0px); // 下拉菜单项底部内边距 - --ti-action-menu-item-padding-bottom: var(--ti-common-space-0); + --ti-action-menu-item-padding-bottom: var(--ti-common-space-0, 0px); // 下拉菜单项右侧内边距 - --ti-action-menu-item-padding-left: var(--ti-common-space-0); + --ti-action-menu-item-padding-left: var(--ti-common-space-0, 0px); // 下拉菜单项图标顶部内边距 --ti-action-menu-item-svg-margin-top: -2px; // 下拉菜单项图标右侧内边距 - --ti-action-menu-item-svg-margin-right: var(--ti-common-space-base); + --ti-action-menu-item-svg-margin-right: var(--ti-common-space-base, 4px); // 下拉菜单项图标底部部内边距 - --ti-action-menu-item-svg-margin-bottom: var(--ti-common-space-0); + --ti-action-menu-item-svg-margin-bottom: var(--ti-common-space-0, 0px); // 下拉菜单项图标左侧内边距 - --ti-action-menu-item-svg-margin-left: var(--ti-common-space-0); + --ti-action-menu-item-svg-margin-left: var(--ti-common-space-0, 0px); } diff --git a/packages/theme/src/alert/vars.less b/packages/theme/src/alert/vars.less index 12e82409e..43754232a 100644 --- a/packages/theme/src/alert/vars.less +++ b/packages/theme/src/alert/vars.less @@ -12,115 +12,115 @@ .component-css-vars-alert() { // 默认字体 - --ti-alert-font-family: var(--ti-common-font-family); + --ti-alert-font-family: var(--ti-common-font-family, 'Helvetica', 'Arial', 'PingFangSC-Regular', 'Hiragino Sans GB', 'Microsoft YaHei', '微软雅黑', 'Microsoft JhengHei'); // 描述字号 - --ti-alert-description-font-size: var(--ti-common-font-size-base); + --ti-alert-description-font-size: var(--ti-common-font-size-base, 12px); // 默认关闭图标固定定位顶部距离(hide) - --ti-alert-close-position-top:var(--ti-common-space-4x); + --ti-alert-close-position-top:var(--ti-common-space-4x, 16px); // 默认关闭图标字号 - --ti-alert-close-font-size: var(--ti-common-font-size-base); + --ti-alert-close-font-size: var(--ti-common-font-size-base, 12px); // 自定义关闭文字字号 - --ti-alert-close-text-font-size: var(--ti-common-font-size-base); + --ti-alert-close-text-font-size: var(--ti-common-font-size-base, 12px); // 组件圆角 - --ti-alert-border-radius: var(--ti-common-border-radius-normal); + --ti-alert-border-radius: var(--ti-common-border-radius-normal, 2px); // 标题文本色 - --ti-alert-title-text-color: var(--ti-common-color-text-primary); + --ti-alert-title-text-color: var(--ti-common-color-text-primary, #252b3a); // 标题字号 - --ti-alert-title-font-size: var(--ti-common-font-size-1); + --ti-alert-title-font-size: var(--ti-common-font-size-1, 14px); // 标题图标顶部外边距 - --ti-alert-icon-margin-top: var(--ti-common-space-1); + --ti-alert-icon-margin-top: var(--ti-common-space-1, 1px); // 标题图标字号 - --ti-alert-icon-font-size: var(--ti-common-font-size-1); + --ti-alert-icon-font-size: var(--ti-common-font-size-1, 14px); // 描述内容行高 - --ti-alert-description-line-height: var(--ti-common-line-height-number); + --ti-alert-description-line-height: var(--ti-common-line-height-number, 1.5); // 描述内容顶部内边距 - --ti-alert-normal-content-padding-vertical: var(--ti-common-space-0); + --ti-alert-normal-content-padding-vertical: var(--ti-common-space-0, 0px); // 描述内容水平内边距 - --ti-alert-normal-content-padding-horizontal: var(--ti-common-space-2x); + --ti-alert-normal-content-padding-horizontal: var(--ti-common-space-2x, 8px); // 描述内容提示内容顶部外边距 - --ti-alert-description-margin-top: var(--ti-common-space-base); + --ti-alert-description-margin-top: var(--ti-common-space-base, 4px); // 描述内容提示内容底部外边距 - --ti-alert-description-margin-bottom: var(--ti-common-space-base); + --ti-alert-description-margin-bottom: var(--ti-common-space-base, 4px); // 描述默认文本色 - --ti-alert-description-text-color: var(--ti-common-color-text-secondary); + --ti-alert-description-text-color: var(--ti-common-color-text-secondary, #575d6c); // 默认顶部内边距 - --ti-alert-normal-padding-top: var(--ti-common-space-3x); + --ti-alert-normal-padding-top: var(--ti-common-space-3x, 12px); // 默认右内边距 - --ti-alert-normal-padding-right: var(--ti-common-space-4x); + --ti-alert-normal-padding-right: var(--ti-common-space-4x, 16px); // 默认底部内边距 - --ti-alert-normal-padding-bottom: var(--ti-common-space-3x); + --ti-alert-normal-padding-bottom: var(--ti-common-space-3x, 12px); // 默认左内边距 - --ti-alert-normal-padding-left: var(--ti-common-space-4x); + --ti-alert-normal-padding-left: var(--ti-common-space-4x, 16px); // 默认垂直外边距 - --ti-alert-normal-margin-vertical: var(--ti-common-space-2x); + --ti-alert-normal-margin-vertical: var(--ti-common-space-2x, 8px); // 默认水平外边距 - --ti-alert-normal-margin-horizontal: var(--ti-common-space-0); + --ti-alert-normal-margin-horizontal: var(--ti-common-space-0, 0px); // large尺寸顶部内边距 - --ti-alert-large-padding-top: calc(var(--ti-common-space-base) * 3.5); + --ti-alert-large-padding-top: calc(var(--ti-common-space-base, 4px) * 3.5); // large尺寸底部内边距 - --ti-alert-large-padding-bottom: var(--ti-common-space-3x); + --ti-alert-large-padding-bottom: var(--ti-common-space-3x, 12px); // large尺寸左内边距 - --ti-alert-large-padding-left: var(--ti-common-space-4x); + --ti-alert-large-padding-left: var(--ti-common-space-4x, 16px); // large尺寸右内边距 - --ti-alert-large-padding-right: calc(var(--ti-common-space-base) * 10.5); + --ti-alert-large-padding-right: calc(var(--ti-common-space-base, 4px) * 10.5); // large尺寸操作文本色 - --ti-alert-opration-text-color: var(--ti-common-color-text-highlight); + --ti-alert-opration-text-color: var(--ti-common-color-text-highlight, #526ecc); // large尺寸操作字号 - --ti-alert-opration-font-size: var(--ti-common-font-size-base); + --ti-alert-opration-font-size: var(--ti-common-font-size-base, 12px); // large尺寸图标字号 --ti-alert-large-icon-font-size: 21px; // large尺寸图标顶部外边距 - --ti-alert-large-icon-margin-top: calc(var(--ti-common-space-base) - 2px); + --ti-alert-large-icon-margin-top: calc(var(--ti-common-space-base, 4px) - 2px); // large尺寸描述内容左内边距 - --ti-alert-large-content-padding-left: var(--ti-common-space-4x); + --ti-alert-large-content-padding-left: var(--ti-common-space-4x, 16px); // 大尺寸关闭图标字号 --ti-alert-large-close-font-size: var(--ti-alert-close-font-size); // warning类型边框色 - --ti-alert-warning-border-color: var(--ti-common-color-warn-border); + --ti-alert-warning-border-color: var(--ti-common-color-warn-border, #ffd0a6); // warning类型图标色 - --ti-alert-warning-icon-color: var(--ti-common-color-warn); + --ti-alert-warning-icon-color: var(--ti-common-color-warn, #fa9841); // warning类型链接色(hide) - --ti-alert-warning-link-text-color: var(--ti-common-color-warn-text); + --ti-alert-warning-link-text-color: var(--ti-common-color-warn-text, #e37d29); // warning类型背景色 - --ti-alert-warning-bg-color: var(--ti-common-color-warn-bg); + --ti-alert-warning-bg-color: var(--ti-common-color-warn-bg, #fff3e8); // warning类型关闭图标色 --ti-alert-warning-close-icon-color: var(--ti-alert-warning-icon-color); // warning类型悬浮关闭图标色 --ti-alert-warning-close-hover-icon-color: var(--ti-alert-warning-icon-color); // error类型边框色 - --ti-alert-error-border-color: var(--ti-common-color-error-border-secondary); + --ti-alert-error-border-color: var(--ti-common-color-error-border-secondary, #ffbcba); // error类型图标色 - --ti-alert-error-icon-color: var(--ti-common-color-error); + --ti-alert-error-icon-color: var(--ti-common-color-error, #f66f6a); // error类型链接色(hide) - --ti-alert-error-link-text-color: var(--ti-common-color-error-text); + --ti-alert-error-link-text-color: var(--ti-common-color-error-text, #de504e); // error类型背景色 - --ti-alert-error-bg-color: var(--ti-common-color-error-bg); + --ti-alert-error-bg-color: var(--ti-common-color-error-bg, #ffeeed); // error类型关闭图标色 --ti-alert-error-close-icon-color: var(--ti-alert-error-icon-color); // error类型悬浮关闭图标色 --ti-alert-error-close-hover-icon-color: var(--ti-alert-error-icon-color); // success类型边框色 - --ti-alert-success-border-color: var(--ti-common-color-success-border); + --ti-alert-success-border-color: var(--ti-common-color-success-border, #acf2dc); // success类型图标色 - --ti-alert-success-icon-color: var(--ti-common-color-success); + --ti-alert-success-icon-color: var(--ti-common-color-success, #50d4ab); // success类型链接色(hide) - --ti-alert-success-link-text-color: var(--ti-common-color-text-success); + --ti-alert-success-link-text-color: var(--ti-common-color-text-success, #3ac295); // success类型背景色 - --ti-alert-success-bg-color: var(--ti-common-color-success-bg); + --ti-alert-success-bg-color: var(--ti-common-color-success-bg, #edfff9); // success类型关闭图标色 --ti-alert-success-close-icon-color: var(--ti-alert-success-icon-color); // success类型悬浮关闭图标色 --ti-alert-success-close-hover-icon-color: var(--ti-alert-success-icon-color); // info类型边框色 - --ti-alert-info-border-color: var(--ti-common-color-prompt-border); + --ti-alert-info-border-color: var(--ti-common-color-prompt-border, #beccfa); // info类型图标色 - --ti-alert-info-icon-color: var(--ti-common-color-prompt); + --ti-alert-info-icon-color: var(--ti-common-color-prompt, #5e7ce0); // info类型链接色(hide) - --ti-alert-info-link-text-color: var(--ti-common-color-prompt-text); + --ti-alert-info-link-text-color: var(--ti-common-color-prompt-text, #526ecc); // info类型背景色 - --ti-alert-info-bg-color: var(--ti-common-color-prompt-bg); + --ti-alert-info-bg-color: var(--ti-common-color-prompt-bg, #ebf6ff); // info类型关闭图标色 --ti-alert-info-close-icon-color: var(--ti-alert-info-icon-color); // info类型悬浮关闭图标色 diff --git a/packages/theme/src/amount/vars.less b/packages/theme/src/amount/vars.less index 5effc53c5..9bd82922c 100644 --- a/packages/theme/src/amount/vars.less +++ b/packages/theme/src/amount/vars.less @@ -11,6 +11,6 @@ */ .component-css-vars-amount() { - --ti-amount-icon-color: var(--ti-base-color-brand-6); - --ti-amount-icon-font-size: var(--ti-common-font-size-1); + --ti-amount-icon-color: var(--ti-base-color-brand-6, #5e7ce0); + --ti-amount-icon-font-size: var(--ti-common-font-size-1, 14px); } diff --git a/packages/theme/src/anchor/vars.less b/packages/theme/src/anchor/vars.less index af70429f3..d68a4b080 100644 --- a/packages/theme/src/anchor/vars.less +++ b/packages/theme/src/anchor/vars.less @@ -12,33 +12,33 @@ .component-css-vars-anchor() { // 组件默认背景色 - --ti-anchor-bg-color: var(--ti-common-color-bg-white-normal); + --ti-anchor-bg-color: var(--ti-common-color-bg-white-normal, #fff); // 组件宽度 --ti-anchor-width: 'auto'; // 锚点默认文本色 - --ti-anchor-text-color: var(--ti-common-color-text-primary); + --ti-anchor-text-color: var(--ti-common-color-text-primary, #252b3a); // 锚点默认字号 - --ti-anchor-font-size: var(--ti-common-font-size-1); + --ti-anchor-font-size: var(--ti-common-font-size-1, 14px); // 选中锚点竖向轨道滑块背景色 - --ti-anchor-link-active-bg-color: var(--ti-common-color-selected-background); + --ti-anchor-link-active-bg-color: var(--ti-common-color-selected-background, #5e7ce0); // 选中锚点竖向轨道滑块宽度 - --ti-anchor-orbit-skid-width: var(--ti-common-size-base); + --ti-anchor-orbit-skid-width: var(--ti-common-size-base, 4px); // 竖向轨道宽度 - --ti-anchor-orbit-width: var(--ti-common-size-base); + --ti-anchor-orbit-width: var(--ti-common-size-base, 4px); // 选中锚点文本色 - --ti-anchor-link-active-text-color: var(--ti-common-color-primary-active); + --ti-anchor-link-active-text-color: var(--ti-common-color-primary-active, #7693f5); // 选中锚点蒙层背景色 --ti-anchor-link-mask-bg-color: rgba(80, 115, 229, 0.15); // 悬浮锚点文本色 - --ti-anchor-link-hover-text-color: var(--ti-common-color-primary-active); + --ti-anchor-link-hover-text-color: var(--ti-common-color-primary-active, #7693f5); // 锚点竖向轨道背景色 - --ti-anchor-orbit-bg-color: var(--ti-common-color-line-disabled); + --ti-anchor-orbit-bg-color: var(--ti-common-color-line-disabled, #dfe1e6); // 锚点左外边距 - --ti-anchor-link-margin-left: var(--ti-common-space-2x); + --ti-anchor-link-margin-left: var(--ti-common-space-2x, 8px); // 锚点标题垂直内边距 - --ti-anchor-link-title-padding-vertical: var(--ti-common-space-1); + --ti-anchor-link-title-padding-vertical: var(--ti-common-space-1, 1px); // 锚点标题右外边距 - --ti-anchor-link-title-padding-right: var(--ti-common-space-2x); + --ti-anchor-link-title-padding-right: var(--ti-common-space-2x, 8px); // 锚点标题左外边距 - --ti-anchor-link-title-padding-left: var(--ti-common-space-10); + --ti-anchor-link-title-padding-left: var(--ti-common-space-10, 10px); } diff --git a/packages/theme/src/autocomplete/vars.less b/packages/theme/src/autocomplete/vars.less index 47938d365..4d599e4cf 100644 --- a/packages/theme/src/autocomplete/vars.less +++ b/packages/theme/src/autocomplete/vars.less @@ -12,25 +12,25 @@ .component-css-vars-autocomplete() { // 下拉框边框圆角 - --ti-autocomplete-suggestion-border-radius: var(--ti-common-border-radius-normal); + --ti-autocomplete-suggestion-border-radius: var(--ti-common-border-radius-normal, 2px); // 下拉框边框色 - --ti-autocomplete-suggestion-border-color: var(--ti-common-color-transparent); + --ti-autocomplete-suggestion-border-color: var(--ti-common-color-transparent, transparent); // 下拉框背景色 - --ti-autocomplete-suggestion-bg-color: var(--ti-common-color-bg-white-normal); + --ti-autocomplete-suggestion-bg-color: var(--ti-common-color-bg-white-normal, #fff); // 下拉框列表项的文本色 - --ti-autocomplete-li-text-color: var(--ti-common-color-text-primary); + --ti-autocomplete-li-text-color: var(--ti-common-color-text-primary, #252b3a); // 下拉框列表项字号 - --ti-autocomplete-li-font-size: var(--ti-common-font-size-base); + --ti-autocomplete-li-font-size: var(--ti-common-font-size-base, 12px); // 下拉框列表项的悬浮背景色 - --ti-autocomplete-li-hover-bg-color: var(--ti-common-color-hover-background); + --ti-autocomplete-li-hover-bg-color: var(--ti-common-color-hover-background, #f2f5fc); // 下拉框列表选中项的背景色 - --ti-autocomplete-li-select-bg-color: var(--ti-common-color-selected-background); + --ti-autocomplete-li-select-bg-color: var(--ti-common-color-selected-background, #5e7ce0); // 下拉框列表选中项的文本色 - --ti-autocomplete-li-selected-text-color: var(--ti-common-color-selected-text-color); + --ti-autocomplete-li-selected-text-color: var(--ti-common-color-selected-text-color, #fff); // 每项的分配者的边框色（没有效果） - --ti-autocomplete-li-divider-border-color: var(--ti-common-color-dark); + --ti-autocomplete-li-divider-border-color: var(--ti-common-color-dark, #000); // 下拉框列表项高度 - --ti-autocomplete-li-height: calc(var(--ti-common-size-7x) + 2px); + --ti-autocomplete-li-height: calc(var(--ti-common-size-7x, 28px) + 2px); // 加载图标色（没有效果 - --ti-autocomplete-loading-text-color: var(--ti-common-color-placeholder); + --ti-autocomplete-loading-text-color: var(--ti-common-color-placeholder, #adb0b8); } diff --git a/packages/theme/src/badge/vars.less b/packages/theme/src/badge/vars.less index 538b44c07..791eafa82 100644 --- a/packages/theme/src/badge/vars.less +++ b/packages/theme/src/badge/vars.less @@ -11,18 +11,18 @@ */ .component-css-vars-badge() { - --ti-badge-size: var(--ti-common-size-5x); - --ti-badge-font-size: var(--ti-common-font-size-base); - --ti-badge-font-weight: var(--ti-common-font-weight-7); + --ti-badge-size: var(--ti-common-size-5x, 20px); + --ti-badge-font-size: var(--ti-common-font-size-base, 12px); + --ti-badge-font-weight: var(--ti-common-font-weight-7, bold); --ti-badge-border-radius: 12px; - --ti-badge-text-color: var(--ti-common-color-light); - --ti-badge-bg-color: var(--ti-base-color-error-3); - --ti-badge-link-hover-text-color: var(--ti-common-color-light); - --ti-badge-active-text-color: var(--ti-base-color-brand-6); - --ti-badge-active-bg-color: var(--ti-common-color-light); - --ti-badge-primary-bg-color: var(--ti-base-color-brand-6); - --ti-badge-success-bg-color: var(--ti-common-color-success-normal); - --ti-badge-warning-bg-color: var(--ti-common-color-warning-normal); - --ti-badge-danger-bg-color: var(--ti-base-color-error-3); - --ti-badge-info-bg-color: var(--ti-common-color-info-normal); + --ti-badge-text-color: var(--ti-common-color-light, #fff); + --ti-badge-bg-color: var(--ti-base-color-error-3, #f66f6a); + --ti-badge-link-hover-text-color: var(--ti-common-color-light, #fff); + --ti-badge-active-text-color: var(--ti-base-color-brand-6, #5e7ce0); + --ti-badge-active-bg-color: var(--ti-common-color-light, #fff); + --ti-badge-primary-bg-color: var(--ti-base-color-brand-6, #5e7ce0); + --ti-badge-success-bg-color: var(--ti-common-color-success-normal, #50d4ab); + --ti-badge-warning-bg-color: var(--ti-common-color-warning-normal, #fa9841); + --ti-badge-danger-bg-color: var(--ti-base-color-error-3, #f66f6a); + --ti-badge-info-bg-color: var(--ti-common-color-info-normal, #252b3a); } diff --git a/packages/theme/src/breadcrumb/vars.less b/packages/theme/src/breadcrumb/vars.less index 4d460a57e..54029920b 100644 --- a/packages/theme/src/breadcrumb/vars.less +++ b/packages/theme/src/breadcrumb/vars.less @@ -12,29 +12,29 @@ .component-css-vars-breadcrumb() { // 字号 - --ti-breadcrumb-font-size: var(--ti-common-font-size-base); + --ti-breadcrumb-font-size: var(--ti-common-font-size-base, 12px); // 文本行高 - --ti-breadcrumb-text-line-height: var(--ti-common-line-height-3); + --ti-breadcrumb-text-line-height: var(--ti-common-line-height-3, 18px); // 文本色 - --ti-breadcrumb-text-color: var(--ti-common-color-text-weaken); + --ti-breadcrumb-text-color: var(--ti-common-color-text-weaken, #8a8e99); // 字族 - --ti-breadcrumb-font-family: var(--ti-common-font-family); + --ti-breadcrumb-font-family: var(--ti-common-font-family, 'Helvetica', 'Arial', 'PingFangSC-Regular', 'Hiragino Sans GB', 'Microsoft YaHei', '微软雅黑', 'Microsoft JhengHei'); // 分隔符填充色 - --ti-breadcrumb-separator-text-color: var(--ti-common-color-placeholder); + --ti-breadcrumb-separator-text-color: var(--ti-common-color-placeholder, #adb0b8); // 分割箭头宽度 - --ti-breadcrumb-separator-width: calc(var(--ti-common-size-base) + 2px); + --ti-breadcrumb-separator-width: calc(var(--ti-common-size-base, 4px) + 2px); // 分隔图标的垂直外边距 - --ti-breadcrumb-separator-margin-vertical: var(--ti-common-space-0); + --ti-breadcrumb-separator-margin-vertical: var(--ti-common-space-0, 0px); // 分隔图标的水平外边距 - --ti-breadcrumb-separator-margin-horizontal: var(--ti-common-space-base); + --ti-breadcrumb-separator-margin-horizontal: var(--ti-common-space-base, 4px); // 悬浮文本色 - --ti-breadcrumb-hover-text-color: var(--ti-common-color-primary-normal); + --ti-breadcrumb-hover-text-color: var(--ti-common-color-primary-normal, #5e7ce0); // 悬浮文本下划线 --ti-breadcrumb-hover-text-decoration: none; // 当前节点字重 - --ti-breadcrumb-text-font-weight: var(--ti-common-font-weight-7); + --ti-breadcrumb-text-font-weight: var(--ti-common-font-weight-7, bold); // 当前节点文本色 - --ti-breadcrumb-selected-text-color: var(--ti-common-color-text-primary); + --ti-breadcrumb-selected-text-color: var(--ti-common-color-text-primary, #252b3a); // 当前节点悬浮文本色 --ti-breadcrumb-selected-hover-text-color: var(--ti-breadcrumb-selected-text-color); } diff --git a/packages/theme/src/bulletin-board/vars.less b/packages/theme/src/bulletin-board/vars.less index 82acfa19d..51ca16d6f 100644 --- a/packages/theme/src/bulletin-board/vars.less +++ b/packages/theme/src/bulletin-board/vars.less @@ -11,21 +11,21 @@ */ .component-css-vars-bulletin-board() { - --ti-bulletin-board-title-font-size: var(--ti-common-font-size-3); - --ti-bulletin-board-title-font-weight: var(--ti-common-font-weight-7); - --ti-bulletin-board-title-text-color: var(--ti-common-color-info-normal); - --ti-bulletin-board-item-title-text-color: var(--ti-common-color-dark); - --ti-bulletin-board-item-date-text-color: var(--ti-common-color-placeholder); - --ti-bulletin-board-item-date-font-size: var(--ti-common-font-size-base); - --ti-bulletin-board-new-bg-color: var(--ti-base-color-error-3); - --ti-bulletin-board-new-text-color: var(--ti-common-color-light); - --ti-bulletin-board-new-border-radius: var(--ti-common-border-radius-normal); - --ti-bulletin-board-more-text-color: var(--ti-base-color-brand-6); - --ti-bulletin-board-more-hover-text-color: var(--ti-base-color-brand-5); - --ti-bulletin-board-more-font-size: var(--ti-common-font-size-base); - --ti-bulletin-board-more-icon-font-size: var(--ti-common-font-size-1); - --ti-bulletin-board-tabs-item-text-color: var(--ti-common-color-info-normal); - --ti-bulletin-board-tabs-item-hover-text-color: var(--ti-base-color-brand-6); - --ti-bulletin-board-tabs-item-disabled-text-color: var(--ti-common-color-placeholder); - --ti-bulletin-board-tabs-header-border-color: var(--ti-common-color-border); + --ti-bulletin-board-title-font-size: var(--ti-common-font-size-3, 18px); + --ti-bulletin-board-title-font-weight: var(--ti-common-font-weight-7, bold); + --ti-bulletin-board-title-text-color: var(--ti-common-color-info-normal, #252b3a); + --ti-bulletin-board-item-title-text-color: var(--ti-common-color-dark, #000); + --ti-bulletin-board-item-date-text-color: var(--ti-common-color-placeholder, #adb0b8); + --ti-bulletin-board-item-date-font-size: var(--ti-common-font-size-base, 12px); + --ti-bulletin-board-new-bg-color: var(--ti-base-color-error-3, #f66f6a); + --ti-bulletin-board-new-text-color: var(--ti-common-color-light, #fff); + --ti-bulletin-board-new-border-radius: var(--ti-common-border-radius-normal, 2px); + --ti-bulletin-board-more-text-color: var(--ti-base-color-brand-6, #5e7ce0); + --ti-bulletin-board-more-hover-text-color: var(--ti-base-color-brand-5, #7693f5); + --ti-bulletin-board-more-font-size: var(--ti-common-font-size-base, 12px); + --ti-bulletin-board-more-icon-font-size: var(--ti-common-font-size-1, 14px); + --ti-bulletin-board-tabs-item-text-color: var(--ti-common-color-info-normal, #252b3a); + --ti-bulletin-board-tabs-item-hover-text-color: var(--ti-base-color-brand-6, #5e7ce0); + --ti-bulletin-board-tabs-item-disabled-text-color: var(--ti-common-color-placeholder, #adb0b8); + --ti-bulletin-board-tabs-header-border-color: var(--ti-common-color-border, #adb0b8); } diff --git a/packages/theme/src/button-group/vars.less b/packages/theme/src/button-group/vars.less index 4633e4c49..c8f6697ed 100644 --- a/packages/theme/src/button-group/vars.less +++ b/packages/theme/src/button-group/vars.less @@ -12,11 +12,11 @@ .component-css-vars-button-group() { // 按钮组边框色 - --ti-button-group-border-color: var(--ti-common-color-line-normal); + --ti-button-group-border-color: var(--ti-common-color-line-normal, #adb0b8); // 按钮组边框厚度 --ti-button-group-border-weight: 0; // 按钮组圆角 - --ti-button-group-border-radius: var(--ti-common-border-radius-normal); + --ti-button-group-border-radius: var(--ti-common-border-radius-normal, 2px); // 按钮组第一个按钮右侧圆角 --ti-button-group-right-border-radius: 0px; // 按钮组中间按钮圆角 @@ -24,63 +24,63 @@ // 按钮组最后一个按钮左侧圆角 --ti-button-group-left-border-radius: 0px; // 默认插槽尾部按钮的左边框色 - --ti-button-group-hover-border-color: var(--ti-common-color-line-active); + --ti-button-group-hover-border-color: var(--ti-common-color-line-active, #5e7ce0); // 默认插槽按钮间分割线颜色 - --ti-button-group-info-border-color: var(--ti-common-color-light); + --ti-button-group-info-border-color: var(--ti-common-color-light, #fff); // 禁用色（没有使用） - --ti-button-group-disabled-text-color: var(--ti-common-color-text-disabled); + --ti-button-group-disabled-text-color: var(--ti-common-color-text-disabled, #adb0b8); // 默认按钮未选中项背景色 --ti-button-group-item-bg-color: #e9edfa; // 按钮非选中项文本色 - --ti-button-group-item-btn-text-color: var(--ti-common-color-text-primary); + --ti-button-group-item-btn-text-color: var(--ti-common-color-text-primary, #252b3a); // 按钮项宽度 - --ti-button-group-item-btn-width: var(--ti-common-size-width-normal); + --ti-button-group-item-btn-width: var(--ti-common-size-width-normal, 80px); // 未指定尺寸的按钮项高度 - --ti-button-group-item-btn-height: var(--ti-common-size-height-normal); + --ti-button-group-item-btn-height: var(--ti-common-size-height-normal, 28px); // 按钮组默认字号 - --ti-button-group-item-btn-font-size: var(--ti-common-font-size-base); + --ti-button-group-item-btn-font-size: var(--ti-common-font-size-base, 12px); // 按钮项禁用背景色 - --ti-button-group-item-btn-disabled-bg-color: var(--ti-common-color-bg-disabled); + --ti-button-group-item-btn-disabled-bg-color: var(--ti-common-color-bg-disabled, #f5f5f6); // 按钮项禁用边框色 - --ti-button-group-item-btn-disabled-border-color: var(--ti-common-color-border); + --ti-button-group-item-btn-disabled-border-color: var(--ti-common-color-border, #adb0b8); // 按钮项禁用色 - --ti-button-group-item-btn-disabled-text-color: var(--ti-common-color-text-disabled); + --ti-button-group-item-btn-disabled-text-color: var(--ti-common-color-text-disabled, #adb0b8); // 默认按钮项悬浮背景色 --ti-button-group-item-btn-hover-bg-color: #beccfa; // 按钮项悬浮边框色 - --ti-button-group-item-btn-hover-border-color: var(--ti-common-color-primary-hover); + --ti-button-group-item-btn-hover-border-color: var(--ti-common-color-primary-hover, #7693f5); // 默认按钮非选中项悬浮文本色 --ti-button-group-item-btn-hover-text-color: var(--ti-button-group-item-btn-text-color); // 朴素按钮非选中项悬浮文本色 - --ti-button-group-item-btn-plain-text-color: var(--ti-common-color-text-link-hover); + --ti-button-group-item-btn-plain-text-color: var(--ti-common-color-text-link-hover, #344899); // 朴素按钮项悬浮背景色 - --ti-button-group-item-btn-plain-bg-color: var(--ti-common-color-prompt-bg); + --ti-button-group-item-btn-plain-bg-color: var(--ti-common-color-prompt-bg, #ebf6ff); // 朴素按钮非选中项悬浮边框色 - --ti-button-group-item-btn-plain-border-color: var(--ti-common-color-bg-emphasize); + --ti-button-group-item-btn-plain-border-color: var(--ti-common-color-bg-emphasize, #5e7ce0); // 默认按钮选中项背景色 - --ti-button-group-item-active-bg-color: var(--ti-common-color-bg-emphasize); + --ti-button-group-item-active-bg-color: var(--ti-common-color-bg-emphasize, #5e7ce0); // 默认按钮选中项悬浮背景色 --ti-button-group-item-btn-active-hover-bg-color: #beccfa; // 朴素按钮选中项文本颜色 - --ti-button-group-plain-active-text-color: var(--ti-common-color-bg-emphasize); + --ti-button-group-plain-active-text-color: var(--ti-common-color-bg-emphasize, #5e7ce0); // 默认按钮选中项禁用时背景色 --ti-button-group-item-active-disabled-bg-color: #dfe1e6; // 默认按钮选中项文本色 - --ti-button-group-item-active-text-color: var(--ti-common-color-light); + --ti-button-group-item-active-text-color: var(--ti-common-color-light, #fff); // 默认按钮右侧外边距 --ti-button-group-item-li-margin-right: 2px; // 默认按钮下侧外边距 - --ti-button-group-item-li-margin-bottom: var(--ti-common-space-base); + --ti-button-group-item-li-margin-bottom: var(--ti-common-space-base, 4px); // 默认按钮选中边框色 - --ti-button-group-item-active-border-color: var(--ti-common-color-bg-emphasize); + --ti-button-group-item-active-border-color: var(--ti-common-color-bg-emphasize, #5e7ce0); // 默认按钮选中边框色 - --ti-button-group-active-hover-border-color: var(--ti-common-color-primary-hover); + --ti-button-group-active-hover-border-color: var(--ti-common-color-primary-hover, #7693f5); // 默认按钮内间距 --ti-button-group-btn-padding-horizontal: 30px; // 小尺寸按钮字号 --ti-button-group-item-active-font-size: 14px; // 按钮组按钮上间距 - --ti-button-group-margin-top: var(--ti-common-space-0); + --ti-button-group-margin-top: var(--ti-common-space-0, 0px); // 按钮组各个按钮的上间距 --ti-button-group-item-margin-top: 0; // 小尺寸按钮组按钮右间距 @@ -90,11 +90,11 @@ // 无边框按钮悬浮按钮组背景色 --ti-button-group-no-border-hover-bg-color: #beccfa; // 无边框按钮组按钮选中态悬浮背景色 - --ti-button-group-no-border-active-hover-bg-color: var(--ti-common-color-primary-hover); + --ti-button-group-no-border-active-hover-bg-color: var(--ti-common-color-primary-hover, #7693f5); // 无边框按钮组按钮禁用状态下背景色 --ti-button-group-no-border-disabled-bg-color: #ffffff; // 小尺寸按钮内间距 - --ti-button-group-mini-padding-horizontal: var(--ti-common-space-3x); + --ti-button-group-mini-padding-horizontal: var(--ti-common-space-3x, 12px); // 小尺寸按钮圆角 --ti-button-group-mini-border-radius: 0px; // 无边框按钮悬浮边框色 @@ -102,9 +102,9 @@ // 选中按钮组按钮悬浮边框色 --ti-button-group-no-border-border-color: transparent; // 按钮角标高度 - --ti-button-group-item-sup-height: var(--ti-common-size-4x); + --ti-button-group-item-sup-height: var(--ti-common-size-4x, 16px); // 按钮角标字体颜色 - --ti-button-group-item-sup-font-color: var(--ti-common-color-text-white); + --ti-button-group-item-sup-font-color: var(--ti-common-color-text-white, #fff); // 按钮角标字体大小 - --ti-button-group-item-sup-font-size: var(--ti-common-font-size-base); + --ti-button-group-item-sup-font-size: var(--ti-common-font-size-base, 12px); } diff --git a/packages/theme/src/button/vars.less b/packages/theme/src/button/vars.less index 2d0331ed5..516331d0c 100644 --- a/packages/theme/src/button/vars.less +++ b/packages/theme/src/button/vars.less @@ -12,116 +12,116 @@ .component-css-vars-button() { // 按钮圆角 - --ti-button-border-radius: var(--ti-common-border-radius-normal); + --ti-button-border-radius: var(--ti-common-border-radius-normal, 2px); // 按钮字号 - --ti-button-font-size: var(--ti-common-font-size-base); + --ti-button-font-size: var(--ti-common-font-size-base, 12px); // 朴素类按钮禁用文本色(非默认) - --ti-button-plain-disabled-text-color: var(--ti-common-color-text-disabled); + --ti-button-plain-disabled-text-color: var(--ti-common-color-text-disabled, #adb0b8); // 按钮边框尺寸 - --ti-button-border-width: var(--ti-common-border-weight-normal); + --ti-button-border-width: var(--ti-common-border-weight-normal, 1px); // 按钮边框样式 - --ti-button-border-style: var(--ti-common-border-style-solid); + --ti-button-border-style: var(--ti-common-border-style-solid, solid); // 按钮加载时背景色 --ti-button-loading-bg-color: rgba(255, 255, 255, 0.35); // 默认按钮最小宽度 - --ti-button-size-normal-min-width: var(--ti-common-size-width-normal); + --ti-button-size-normal-min-width: var(--ti-common-size-width-normal, 80px); // 默认按钮最大宽度 - --ti-button-size-normal-max-width: var(--ti-common-size-width-medium); + --ti-button-size-normal-max-width: var(--ti-common-size-width-medium, 120px); // 默认按钮的高度 - --ti-button-size-normal-height: var(--ti-common-size-height-normal); + --ti-button-size-normal-height: var(--ti-common-size-height-normal, 28px); // 默认按钮水平内边距 - --ti-button-size-normal-padding-horizontal: var(--ti-common-size-5x); + --ti-button-size-normal-padding-horizontal: var(--ti-common-size-5x, 20px); // 默认按钮最小宽度 - --ti-button-size-normal-min-width: var(--ti-common-size-20x); + --ti-button-size-normal-min-width: var(--ti-common-size-20x, 80px); // 超大按钮的最小宽度 - --ti-button-size-large-min-width: var(--ti-common-size-width-normal); + --ti-button-size-large-min-width: var(--ti-common-size-width-normal, 80px); // 超大按钮高度 - --ti-button-size-large-height: var(--ti-common-size-height-large); + --ti-button-size-large-height: var(--ti-common-size-height-large, 48px); // 超大按钮字号 - --ti-button-size-large-font-size: var(--ti-common-font-size-2); + --ti-button-size-large-font-size: var(--ti-common-font-size-2, 16px); // 超大按钮水平内边距 - --ti-button-size-large-padding-horizontal: var(--ti-common-size-8x); + --ti-button-size-large-padding-horizontal: var(--ti-common-size-8x, 32px); // 超大按钮最小宽度 - --ti-button-size-large-min-width: var(--ti-common-size-24x); + --ti-button-size-large-min-width: var(--ti-common-size-24x, 96px); // 超大按钮左侧外边距 --ti-button-size-large-margin-left: 8px; // 中等尺寸的最小宽度 - --ti-button-size-medium-min-width: var(--ti-common-size-width-normal); + --ti-button-size-medium-min-width: var(--ti-common-size-width-normal, 80px); // 中等按钮高度 - --ti-button-size-medium-height: var(--ti-common-size-height-medium); + --ti-button-size-medium-height: var(--ti-common-size-height-medium, 40px); // 中等按钮字号 - --ti-button-size-medium-font-size: var(--ti-common-font-size-1); + --ti-button-size-medium-font-size: var(--ti-common-font-size-1, 14px); // 中等按钮水平内边距 - --ti-button-size-medium-padding-horizontal: var(--ti-common-size-7x); + --ti-button-size-medium-padding-horizontal: var(--ti-common-size-7x, 28px); // 中等按钮最小宽度 - --ti-button-size-medium-min-width: var(--ti-common-size-22x); + --ti-button-size-medium-min-width: var(--ti-common-size-22x, 88px); // 中等按钮左侧外边距 --ti-button-size-medium-margin-left: 8px; // 小尺寸的最小宽度 - --ti-button-size-small-min-width: var(--ti-common-size-width-normal); + --ti-button-size-small-min-width: var(--ti-common-size-width-normal, 80px); // 小型按钮高度 - --ti-button-size-small-height: var(--ti-common-size-height-small); + --ti-button-size-small-height: var(--ti-common-size-height-small, 32px); // 小型按钮字号 - --ti-button-size-small-font-size: var(--ti-common-font-size-1); + --ti-button-size-small-font-size: var(--ti-common-font-size-1, 14px); // 小尺寸按钮水平内边距 - --ti-button-size-small-padding-horizontal: var(--ti-common-size-3x); + --ti-button-size-small-padding-horizontal: var(--ti-common-size-3x, 12px); // 小尺寸按钮最小宽度 - --ti-button-size-small-min-width: var(--ti-common-size-18x); + --ti-button-size-small-min-width: var(--ti-common-size-18x, 72px); // 小尺寸按钮左侧外边距 --ti-button-size-small-margin-left: 8px; // 迷你尺寸的最小宽度 - --ti-button-size-mini-min-width: var(--ti-common-size-width-normal); + --ti-button-size-mini-min-width: var(--ti-common-size-width-normal, 80px); // 迷你尺寸按钮高度 - --ti-button-size-mini-height: var(--ti-common-size-height-mini); + --ti-button-size-mini-height: var(--ti-common-size-height-mini, 24px); // 迷你尺寸按钮字号 - --ti-button-size-mini-font-size: var(--ti-common-font-size-base); + --ti-button-size-mini-font-size: var(--ti-common-font-size-base, 12px); // 迷你尺寸按钮水平内边距 - --ti-button-size-mini-padding-horizontal: var(--ti-common-size-2x); + --ti-button-size-mini-padding-horizontal: var(--ti-common-size-2x, 8px); // 迷你尺寸按钮最小宽度 - --ti-button-size-mini-min-width: var(--ti-common-size-16x); + --ti-button-size-mini-min-width: var(--ti-common-size-16x, 64px); // 默认按钮文本色 - --ti-button-normal-text-color: var(--ti-common-color-text-primary); + --ti-button-normal-text-color: var(--ti-common-color-text-primary, #252b3a); // 默认按钮边框色 - --ti-button-normal-border-color: var(--ti-common-color-border); + --ti-button-normal-border-color: var(--ti-common-color-border, #adb0b8); // 默认按钮背景色 - --ti-button-normal-background-color: var(--ti-common-color-light); + --ti-button-normal-background-color: var(--ti-common-color-light, #fff); // 默认按钮悬浮文本色 - --ti-button-normal-hover-text-color: var(--ti-common-color-primary-normal); + --ti-button-normal-hover-text-color: var(--ti-common-color-primary-normal, #5e7ce0); // 默认按钮悬浮边框色 - --ti-button-normal-hover-border-color: var(--ti-common-color-primary-normal); + --ti-button-normal-hover-border-color: var(--ti-common-color-primary-normal, #5e7ce0); // 默认按钮悬浮背景色 - --ti-button-normal-hover-bg-color: var(--ti-common-color-light); + --ti-button-normal-hover-bg-color: var(--ti-common-color-light, #fff); // 默认按钮点击瞬间文本色 - --ti-button-normal-active-text-color: var(--ti-common-color-primary-normal); + --ti-button-normal-active-text-color: var(--ti-common-color-primary-normal, #5e7ce0); // 默认按钮点击瞬间边框色 - --ti-button-normal-active-border-color: var(--ti-common-color-primary-normal); + --ti-button-normal-active-border-color: var(--ti-common-color-primary-normal, #5e7ce0); // 默认按钮点击瞬间背景色 - --ti-button-normal-active-bg-color: var(--ti-common-color-hover-background); + --ti-button-normal-active-bg-color: var(--ti-common-color-hover-background, #f2f5fc); // 默认按钮禁用文本色 - --ti-button-normal-disabled-text-color: var(--ti-common-color-text-disabled); + --ti-button-normal-disabled-text-color: var(--ti-common-color-text-disabled, #adb0b8); // 默认按钮禁用边框色 - --ti-button-normal-disabled-border-color: var(--ti-common-color-line-disabled); + --ti-button-normal-disabled-border-color: var(--ti-common-color-line-disabled, #dfe1e6); // 禁用类默认按钮背景色 - --ti-button-normal-disabled-bg-color: var(--ti-common-color-bg-disabled); + --ti-button-normal-disabled-bg-color: var(--ti-common-color-bg-disabled, #f5f5f6); // 文字按钮文本色 - --ti-button-text-color: var(--ti-common-color-primary-normal); + --ti-button-text-color: var(--ti-common-color-primary-normal, #5e7ce0); // 文字按钮悬浮文本修饰(hide) --ti-button-text-hover-text-decoration: none; // 文字按钮悬浮文本色 - --ti-button-text-color-hover: var(--ti-common-color-text-link-hover); + --ti-button-text-color-hover: var(--ti-common-color-text-link-hover, #344899); // 文字按钮悬浮文本字重 - --ti-button-text-hover-weight: var(--ti-common-font-weight-4); + --ti-button-text-hover-weight: var(--ti-common-font-weight-4, normal); // 文字按钮点击瞬间文本色 - --ti-button-text-color-active: var(--ti-common-color-primary-active); + --ti-button-text-color-active: var(--ti-common-color-primary-active, #7693f5); // 文字按钮禁用文本色 - --ti-button-text-color-disabled: var(--ti-common-color-text-disabled); + --ti-button-text-color-disabled: var(--ti-common-color-text-disabled, #adb0b8); // 文字按钮图标宽度 --ti-button-text-svg-width: 1em; // 文字按钮图标高度 @@ -135,233 +135,233 @@ // 文字按钮悬浮圆角 --ti-button-text-hover-border-radius: 0px; // 文字按钮图标填充色 - --ti-button-text-svg-fill-color: var(--ti-common-color-text-secondary); + --ti-button-text-svg-fill-color: var(--ti-common-color-text-secondary, #575d6c); // 文字按钮图标悬浮填充色 --ti-button-text-svg-hover-fill-color: var(--ti-button-text-color-hover); // 文字按钮禁用时图标填充色 - --ti-button-text-svg-disabled-fill-color: var(--ti-common-color-text-disabled); + --ti-button-text-svg-disabled-fill-color: var(--ti-common-color-text-disabled, #adb0b8); // 图标加文字按钮图标右侧外边距 - --ti-button-text-has-svg-icon-margin-right: var(--ti-common-size-2x); + --ti-button-text-has-svg-icon-margin-right: var(--ti-common-size-2x, 8px); // 图标加文字按钮字体颜色 - --ti-button-text-has-svg-text-color: var(--ti-common-color-text-primary); + --ti-button-text-has-svg-text-color: var(--ti-common-color-text-primary, #252b3a); // 图标加文字按钮悬浮时字体颜色 - --ti-button-text-has-svg-hover-text-color: var(--ti-common-color-text-link); + --ti-button-text-has-svg-hover-text-color: var(--ti-common-color-text-link, #526ecc); // 文字按钮只有svg时水平内边距 - --ti-button-text-svg-padding-horizontal: var(--ti-common-size-2x); + --ti-button-text-svg-padding-horizontal: var(--ti-common-size-2x, 8px); // 主要按钮的主题类背景色+朴素类文本边框色 - --ti-button-primary-normal-bg-color: var(--ti-common-color-primary-normal); + --ti-button-primary-normal-bg-color: var(--ti-common-color-primary-normal, #5e7ce0); // 主要按钮的主题类边框色 - --ti-button-primary-normal-border-color: var(--ti-common-color-primary-normal); + --ti-button-primary-normal-border-color: var(--ti-common-color-primary-normal, #5e7ce0); // 主题类主要按钮悬浮背景色 - --ti-button-primary-hover-bg-color: var(--ti-common-color-primary-hover); + --ti-button-primary-hover-bg-color: var(--ti-common-color-primary-hover, #7693f5); // 主题类主要按钮悬浮边框色 - --ti-button-primary-hover-border-color: var(--ti-common-color-primary-hover); + --ti-button-primary-hover-border-color: var(--ti-common-color-primary-hover, #7693f5); // 主要按钮点击瞬间背景色 - --ti-button-primary-active-bg-color: var(--ti-common-color-primary-active); + --ti-button-primary-active-bg-color: var(--ti-common-color-primary-active, #7693f5); // 主要按钮的禁用主题类背景色+禁用朴素类边框色 - --ti-button-primary-disabled-bg-color: var(--ti-common-color-primary-disabled-bgcolor); + --ti-button-primary-disabled-bg-color: var(--ti-common-color-primary-disabled-bgcolor, #f5f5f6); // 主题类主要按钮文本色 - --ti-button-primary-text-color: var(--ti-common-color-light); + --ti-button-primary-text-color: var(--ti-common-color-light, #fff); // 禁用主题类主要按钮文本色 - --ti-button-primary-disabled-text-color: var(--ti-common-color-primary-disabled-text); + --ti-button-primary-disabled-text-color: var(--ti-common-color-primary-disabled-text, #adb0b8); // 禁用主题类主要按钮边框色 - --ti-button-primary-disabled-border-color: var(--ti-common-color-primary-disabled-border); + --ti-button-primary-disabled-border-color: var(--ti-common-color-primary-disabled-border, #dfe1e6); // 朴素类主要按钮文本色 - --ti-button-primary-plain-text-color: var(--ti-common-color-primary-normal); + --ti-button-primary-plain-text-color: var(--ti-common-color-primary-normal, #5e7ce0); // 朴素类主要按钮悬浮文本色 - --ti-button-primary-plain-hover-text-color: var(--ti-common-color-light); + --ti-button-primary-plain-hover-text-color: var(--ti-common-color-light, #fff); // 朴素类主要按钮背景色 - --ti-button-primary-plain-bg-color: var(--ti-common-color-prompt-bg); + --ti-button-primary-plain-bg-color: var(--ti-common-color-prompt-bg, #ebf6ff); // 朴素类主要按钮悬浮背景色 - --ti-button-primary-plain-hover-bg-color: var(--ti-common-color-primary-normal); + --ti-button-primary-plain-hover-bg-color: var(--ti-common-color-primary-normal, #5e7ce0); // 朴素类主要按钮边框色 - --ti-button-primary-plain-border-color: var(--ti-common-color-primary-normal); + --ti-button-primary-plain-border-color: var(--ti-common-color-primary-normal, #5e7ce0); // 朴素类主要按钮悬浮边框色 - --ti-button-primary-plain-hover-border-color: var(--ti-common-color-primary-normal); + --ti-button-primary-plain-hover-border-color: var(--ti-common-color-primary-normal, #5e7ce0); // 禁用朴素类主要按钮背景色 - --ti-button-primary-plain-disabled-bg-color: var(--ti-common-color-primary-plain-disabled-bg-color); + --ti-button-primary-plain-disabled-bg-color: var(--ti-common-color-primary-plain-disabled-bg-color, rgba(191, 191, 191, 0.1)); // 成功按钮的主题类背景色+朴素类文本边框色 - --ti-button-success-normal-bg-color: var(--ti-common-color-success-normal); + --ti-button-success-normal-bg-color: var(--ti-common-color-success-normal, #50d4ab); // 成功按钮的主题类边框色 - --ti-button-success-normal-border-color: var(--ti-common-color-success-normal); + --ti-button-success-normal-border-color: var(--ti-common-color-success-normal, #50d4ab); // 成功按钮悬浮背景色 - --ti-button-success-hover-bg-color: var(--ti-common-color-success-hover); + --ti-button-success-hover-bg-color: var(--ti-common-color-success-hover, #acf2dc); // 成功按钮悬浮边框色 - --ti-button-success-hover-border-color: var(--ti-common-color-success-hover); + --ti-button-success-hover-border-color: var(--ti-common-color-success-hover, #acf2dc); // 成功按钮点击瞬间背景色 - --ti-button-success-active-bg-color: var(--ti-common-color-success-active); + --ti-button-success-active-bg-color: var(--ti-common-color-success-active, #acf2dc); // 成功按钮的禁用主题类背景色+禁用朴素类边框色 - --ti-button-success-disabled-bg-color: var(--ti-common-color-success-disabled-bgcolor); + --ti-button-success-disabled-bg-color: var(--ti-common-color-success-disabled-bgcolor, #f5f5f6); // 成功按钮文本色 - --ti-button-success-text-color: var(--ti-common-color-light); + --ti-button-success-text-color: var(--ti-common-color-light, #fff); // 禁用主题类成功按钮文本色 - --ti-button-success-disabled-text-color: var(--ti-common-color-success-disabled-text); + --ti-button-success-disabled-text-color: var(--ti-common-color-success-disabled-text, #adb0b8); // 禁用主题类成功按钮边框色 - --ti-button-success-disabled-border-color: var(--ti-common-color-success-disabled-border); + --ti-button-success-disabled-border-color: var(--ti-common-color-success-disabled-border, #dfe1e6); // 朴素类成功按钮文本色 - --ti-button-success-plain-text-color: var(--ti-common-color-success-normal); + --ti-button-success-plain-text-color: var(--ti-common-color-success-normal, #50d4ab); // 朴素类成功按钮悬浮文本色 - --ti-button-success-plain-hover-text-color: var(--ti-common-color-light); + --ti-button-success-plain-hover-text-color: var(--ti-common-color-light, #fff); // 朴素类成功按钮背景色 - --ti-button-success-plain-bg-color: var(--ti-common-color-success-bg); + --ti-button-success-plain-bg-color: var(--ti-common-color-success-bg, #edfff9); // 朴素类成功按钮悬浮背景色 - --ti-button-success-plain-hover-bg-color: var(--ti-common-color-success-normal); + --ti-button-success-plain-hover-bg-color: var(--ti-common-color-success-normal, #50d4ab); // 朴素类成功按钮边框色 - --ti-button-success-plain-border-color: var(--ti-common-color-success-normal); + --ti-button-success-plain-border-color: var(--ti-common-color-success-normal, #50d4ab); // 朴素类成功按钮悬浮边框色 - --ti-button-success-plain-hover-border-color: var(--ti-common-color-success-normal); + --ti-button-success-plain-hover-border-color: var(--ti-common-color-success-normal, #50d4ab); // 禁用朴素类成功按钮背景色 - --ti-button-success-plain-disabled-bg-color: var(--ti-common-color-success-plain-disabled-bg-color); + --ti-button-success-plain-disabled-bg-color: var(--ti-common-color-success-plain-disabled-bg-color, rgba(166, 195, 185, 0.1)); // 警告按钮背景色|朴素类警告按钮悬浮背景色 - --ti-button-warning-normal-bg-color: var(--ti-common-color-warning-normal); + --ti-button-warning-normal-bg-color: var(--ti-common-color-warning-normal, #fa9841); // 警告按钮的主题类边框色 - --ti-button-warning-normal-border-color: var(--ti-common-color-warning-normal); + --ti-button-warning-normal-border-color: var(--ti-common-color-warning-normal, #fa9841); // 警告按钮悬浮背景色 - --ti-button-warning-hover-bg-color: var(--ti-common-color-warning-hover); + --ti-button-warning-hover-bg-color: var(--ti-common-color-warning-hover, #fac20a); // 警告按钮悬浮边框色 - --ti-button-success-hover-border-color: var(--ti-common-color-success-hover); + --ti-button-success-hover-border-color: var(--ti-common-color-success-hover, #acf2dc); // 警告按钮点击瞬间背景色 - --ti-button-warning-active-bg-color: var(--ti-common-color-warning-active); + --ti-button-warning-active-bg-color: var(--ti-common-color-warning-active, #fac20a); // 警告按钮的禁用主题类背景色+禁用朴素类边框色 - --ti-button-warning-disabled-bg-color: var(--ti-common-color-warning-disabled-bgcolor); + --ti-button-warning-disabled-bg-color: var(--ti-common-color-warning-disabled-bgcolor, #f5f5f6); // 警告按钮文本色 - --ti-button-warning-text-color: var(--ti-common-color-light); + --ti-button-warning-text-color: var(--ti-common-color-light, #fff); // 禁用警告按钮文本色 - --ti-button-warning-disabled-text-color: var(--ti-common-color-warning-disabled-text); + --ti-button-warning-disabled-text-color: var(--ti-common-color-warning-disabled-text, #adb0b8); // 禁用主题类警告按钮边框色 - --ti-button-warning-disabled-border-color: var(--ti-common-color-warning-disabled-border); + --ti-button-warning-disabled-border-color: var(--ti-common-color-warning-disabled-border, #dfe1e6); // 朴素类主要按钮文本色 - --ti-button-warning-plain-text-color: var(--ti-common-color-warning-normal); + --ti-button-warning-plain-text-color: var(--ti-common-color-warning-normal, #fa9841); // 朴素类主要按钮悬浮文本色 - --ti-button-warning-plain-hover-text-color: var(--ti-common-color-light); + --ti-button-warning-plain-hover-text-color: var(--ti-common-color-light, #fff); // 朴素类警告按钮背景色 - --ti-button-warning-plain-bg-color: var(--ti-common-color-warn-bg); + --ti-button-warning-plain-bg-color: var(--ti-common-color-warn-bg, #fff3e8); // 朴素类警告按钮悬浮背景色 - --ti-button-warning-plain-hover-bg-color: var(--ti-common-color-warning-normal); + --ti-button-warning-plain-hover-bg-color: var(--ti-common-color-warning-normal, #fa9841); // 朴素类警告按钮边框色 - --ti-button-warning-plain-border-color: var(--ti-common-color-warning-normal); + --ti-button-warning-plain-border-color: var(--ti-common-color-warning-normal, #fa9841); // 朴素类警告按钮悬浮边框色 - --ti-button-warning-plain-hover-border-color: var(--ti-common-color-warning-normal); + --ti-button-warning-plain-hover-border-color: var(--ti-common-color-warning-normal, #fa9841); // 禁用朴素类警告按钮背景色 - --ti-button-warning-plain-disabled-bg-color: var(--ti-common-color-warning-plain-disabled-bg-color); + --ti-button-warning-plain-disabled-bg-color: var(--ti-common-color-warning-plain-disabled-bg-color, rgba(211, 198, 162, 0.1)); // 危险按钮默认背景色|朴素类危险按钮边框色 - --ti-button-danger-normal-bg-color: var(--ti-common-color-danger-normal); + --ti-button-danger-normal-bg-color: var(--ti-common-color-danger-normal, #c7000b); // 危险按钮的主题类边框色 - --ti-button-danger-normal-border-color: var(--ti-common-color-danger-normal); + --ti-button-danger-normal-border-color: var(--ti-common-color-danger-normal, #c7000b); // 危险按钮悬浮背景色 - --ti-button-danger-hover-bg-color: var(--ti-common-color-danger-hover); + --ti-button-danger-hover-bg-color: var(--ti-common-color-danger-hover, #d64a52); // 危险按钮悬浮边框色 - --ti-button-danger-hover-border-color: var(--ti-common-color-danger-hover); + --ti-button-danger-hover-border-color: var(--ti-common-color-danger-hover, #d64a52); // 危险按钮点击瞬间背景色 - --ti-button-danger-active-bg-color: var(--ti-common-color-danger-active); + --ti-button-danger-active-bg-color: var(--ti-common-color-danger-active, #b12220); // 危险按钮的禁用主题类背景色+禁用朴素类边框色 - --ti-button-danger-disabled-bg-color: var(--ti-common-color-danger-disabled-bgcolor); + --ti-button-danger-disabled-bg-color: var(--ti-common-color-danger-disabled-bgcolor, #f5f5f6); // 危险按钮文本色 - --ti-button-danger-text-color: var(--ti-common-color-light); + --ti-button-danger-text-color: var(--ti-common-color-light, #fff); // 禁用主题类危险按钮文本色 - --ti-button-danger-disabled-text-color: var(--ti-common-color-danger-disabled-text); + --ti-button-danger-disabled-text-color: var(--ti-common-color-danger-disabled-text, #adb0b8); // 禁用主题类危险按钮边框色 - --ti-button-danger-disabled-border-color: var(--ti-common-color-danger-disabled-border); + --ti-button-danger-disabled-border-color: var(--ti-common-color-danger-disabled-border, #dfe1e6); // 朴素类危险按钮文本色 - --ti-button-danger-plain-text-color: var(--ti-common-color-danger-normal); + --ti-button-danger-plain-text-color: var(--ti-common-color-danger-normal, #c7000b); // 朴素类危险按钮悬浮文本色 - --ti-button-danger-plain-hover-text-color: var(--ti-common-color-light); + --ti-button-danger-plain-hover-text-color: var(--ti-common-color-light, #fff); // 朴素类危险按钮背景色 - --ti-button-danger-plain-bg-color: var(--ti-common-color-error-bg); + --ti-button-danger-plain-bg-color: var(--ti-common-color-error-bg, #ffeeed); // 朴素类危险按钮悬浮背景色 - --ti-button-danger-plain-hover-bg-color: var(--ti-common-color-danger-normal); + --ti-button-danger-plain-hover-bg-color: var(--ti-common-color-danger-normal, #c7000b); // 朴素类危险按钮边框色 - --ti-button-danger-plain-border-color: var(--ti-common-color-danger-normal); + --ti-button-danger-plain-border-color: var(--ti-common-color-danger-normal, #c7000b); // 朴素类危险按钮悬浮边框色 - --ti-button-danger-plain-hover-border-color: var(--ti-common-color-danger-normal); + --ti-button-danger-plain-hover-border-color: var(--ti-common-color-danger-normal, #c7000b); // 禁用朴素类危险按钮背景色 - --ti-button-danger-plain-disabled-bg-color: var(--ti-common-color-danger-disabled-bgcolor); + --ti-button-danger-plain-disabled-bg-color: var(--ti-common-color-danger-disabled-bgcolor, #f5f5f6); // 禁用朴素类危险按钮边框色 - --ti-button-danger-plain-disabled-border-color: var(--ti-common-color-danger-disabled-bgcolor); + --ti-button-danger-plain-disabled-border-color: var(--ti-common-color-danger-disabled-bgcolor, #f5f5f6); // 信息按钮背景色|朴素类信息按钮边框色 - --ti-button-info-normal-bg-color: var(--ti-common-color-info-normal); + --ti-button-info-normal-bg-color: var(--ti-common-color-info-normal, #252b3a); // 信息按钮的主题类边框色 - --ti-button-info-normal-border-color: var(--ti-common-color-info-normal); + --ti-button-info-normal-border-color: var(--ti-common-color-info-normal, #252b3a); // 信息按钮悬浮背景色 - --ti-button-info-hover-bg-color: var(--ti-common-color-info-hover); + --ti-button-info-hover-bg-color: var(--ti-common-color-info-hover, #5c6173); // 信息按钮悬浮边框色 - --ti-button-info-hover-border-color: var(--ti-common-color-info-hover); + --ti-button-info-hover-border-color: var(--ti-common-color-info-hover, #5c6173); // 信息按钮点击瞬间背景色 - --ti-button-info-active-bg-color: var(--ti-common-color-info-active); + --ti-button-info-active-bg-color: var(--ti-common-color-info-active, #5c6173); // 信息按钮的禁用主题类背景色+禁用朴素类边框色 - --ti-button-info-disabled-bg-color: var(--ti-common-color-info-disabled-bgcolor); + --ti-button-info-disabled-bg-color: var(--ti-common-color-info-disabled-bgcolor, #f5f5f6); // 信息按钮文本色 - --ti-button-info-text-color: var(--ti-common-color-light); + --ti-button-info-text-color: var(--ti-common-color-light, #fff); // 禁用信息按钮文本色 - --ti-button-info-disabled-text-color: var(--ti-common-color-info-disabled-text); + --ti-button-info-disabled-text-color: var(--ti-common-color-info-disabled-text, #adb0b8); // 禁用信息按钮边框色 - --ti-button-info-disabled-border-color: var(--ti-common-color-info-disabled-border); + --ti-button-info-disabled-border-color: var(--ti-common-color-info-disabled-border, #dfe1e6); // 朴素类信息按钮文本色 - --ti-button-info-plain-text-color: var(--ti-common-color-info-normal); + --ti-button-info-plain-text-color: var(--ti-common-color-info-normal, #252b3a); // 朴素类信息按钮悬浮文本色 - --ti-button-info-plain-hover-text-color: var(--ti-common-color-light); + --ti-button-info-plain-hover-text-color: var(--ti-common-color-light, #fff); // 朴素类信息按钮背景色 - --ti-button-info-plain-bg-color: var(--ti-common-color-info-bg); + --ti-button-info-plain-bg-color: var(--ti-common-color-info-bg, rgba(51, 51, 51, 0.06)); // 朴素类信息按钮悬浮背景色 - --ti-button-info-plain-hover-bg-color: var(--ti-common-color-info-normal); + --ti-button-info-plain-hover-bg-color: var(--ti-common-color-info-normal, #252b3a); // 朴素类信息按钮边框色 - --ti-button-info-plain-border-color: var(--ti-common-color-info-normal); + --ti-button-info-plain-border-color: var(--ti-common-color-info-normal, #252b3a); // 朴素类信息按钮悬浮边框色 - --ti-button-info-plain-hover-border-color: var(--ti-common-color-info-normal); + --ti-button-info-plain-hover-border-color: var(--ti-common-color-info-normal, #252b3a); // 禁用朴素类信息按钮背景色 - --ti-button-info-plain-disabled-bg-color: var(--ti-common-color-info-plain-disabled-bg-color); + --ti-button-info-plain-disabled-bg-color: var(--ti-common-color-info-plain-disabled-bg-color, rgba(191, 191, 191, 0.1)); // 按钮垂直内边距 - --ti-button-padding-vertical: var(--ti-common-space-0); + --ti-button-padding-vertical: var(--ti-common-space-0, 0px); // 默认圆形按钮内边距 - --ti-button-size-normal-padding: var(--ti-common-space-2x); + --ti-button-size-normal-padding: var(--ti-common-space-2x, 8px); // 纯文本按钮超大尺寸最小宽度 - --ti-button-text-size-large-min-width: var(--ti-common-size-24x); + --ti-button-text-size-large-min-width: var(--ti-common-size-24x, 96px); // 纯文本按钮超大尺寸高度 - --ti-button-text-size-large-height: var(--ti-common-size-height-large); + --ti-button-text-size-large-height: var(--ti-common-size-height-large, 48px); // 纯文本按钮超大尺寸图标宽度 --ti-button-text-size-large-svg-width: 1em; // 纯文本按钮超大尺寸图标高度 --ti-button-text-size-large-svg-height: 1em; // 纯文本按钮水平内边距 - --ti-button-text-padding-horizontal: var(--ti-common-space-0); + --ti-button-text-padding-horizontal: var(--ti-common-space-0, 0px); // 纯文本按钮中等尺寸最小宽度 - --ti-button-text-size-medium-min-width: var(--ti-common-size-22x); + --ti-button-text-size-medium-min-width: var(--ti-common-size-22x, 88px); // 纯文本按钮中等尺寸高度 - --ti-button-text-size-medium-height: var(--ti-common-size-height-medium); + --ti-button-text-size-medium-height: var(--ti-common-size-height-medium, 40px); // 纯文本按钮中等尺寸图标宽度 --ti-button-text-size-medium-svg-width: 1em; // 纯文本按钮中等尺寸图标高度 --ti-button-text-size-medium-svg-height: 1em; // 纯文本按钮默认尺寸最小宽度 - --ti-button-text-size-default-min-width: var(--ti-common-size-20x); + --ti-button-text-size-default-min-width: var(--ti-common-size-20x, 80px); // 纯文本按钮默认尺寸高度 - --ti-button-text-size-default-height: var(--ti-common-size-height-normal); + --ti-button-text-size-default-height: var(--ti-common-size-height-normal, 28px); // 纯文本按钮默认尺寸图标宽度 --ti-button-text-size-default-svg-width: 1em; // 纯文本按钮默认尺寸图标高度 --ti-button-text-size-default-svg-height: 1em; // 纯文本按钮小尺寸最小宽度 - --ti-button-text-size-small-min-width: var(--ti-common-size-18x); + --ti-button-text-size-small-min-width: var(--ti-common-size-18x, 72px); // 纯文本按钮小尺寸高度 - --ti-button-text-size-small-height: var(--ti-common-size-height-small); + --ti-button-text-size-small-height: var(--ti-common-size-height-small, 32px); // 纯文本按钮小尺寸图标宽度 --ti-button-text-size-small-svg-width: 1em; // 纯文本按钮小尺寸图标高度 --ti-button-text-size-small-svg-height: 1em; // 纯文本按钮迷你尺寸最小宽度 - --ti-button-text-size-small-min-width: var(--ti-common-size-16x); + --ti-button-text-size-small-min-width: var(--ti-common-size-16x, 64px); // 纯文本按钮迷你尺寸高度 - --ti-button-text-size-small-height: var(--ti-common-size-height-mini); + --ti-button-text-size-small-height: var(--ti-common-size-height-mini, 24px); // 纯文本按钮迷你尺寸图标宽度 --ti-button-text-size-small-svg-width: 1em; // 纯文本按钮迷你尺寸图标高度 @@ -374,9 +374,9 @@ // 纯图标按钮边框圆角 --ti-button-only-icon-border-radius: 2px; // 纯图标按钮边框颜色 - --ti-button-only-icon-border-color: var(--ti-common-color-border); + --ti-button-only-icon-border-color: var(--ti-common-color-border, #adb0b8); // 纯图标按钮悬浮时边框颜色 - --ti-button-only-icon-hover-border-color: var(--ti-common-color-primary-normal); + --ti-button-only-icon-hover-border-color: var(--ti-common-color-primary-normal, #5e7ce0); // 纯图标按钮禁用时边框颜色 - --ti-button-only-icon-disabled-border-color: var(--ti-common-color-line-disabled); + --ti-button-only-icon-disabled-border-color: var(--ti-common-color-line-disabled, #dfe1e6); } diff --git a/packages/theme/src/calendar/vars.less b/packages/theme/src/calendar/vars.less index 1fce0d909..f99e394e6 100644 --- a/packages/theme/src/calendar/vars.less +++ b/packages/theme/src/calendar/vars.less @@ -11,30 +11,30 @@ */ .component-css-vars-calendar() { - --ti-calendar-bg-color: var(--ti-common-color-light); - --ti-calendar-list-item-selected-text-color: var(--ti-common-color-light); - --ti-calendar-hover-text-color: var(--ti-base-color-brand-5); - --ti-calendar-border-color: var(--ti-common-color-border); - --ti-calendar-text-color-primary: var(--ti-base-color-brand-6); + --ti-calendar-bg-color: var(--ti-common-color-light, #fff); + --ti-calendar-list-item-selected-text-color: var(--ti-common-color-light, #fff); + --ti-calendar-hover-text-color: var(--ti-base-color-brand-5, #7693f5); + --ti-calendar-border-color: var(--ti-common-color-border, #adb0b8); + --ti-calendar-text-color-primary: var(--ti-base-color-brand-6, #5e7ce0); --ti-calendar-background-color-primary: rgba(24, 144, 255, 0.1); - --ti-calendar-bg-color-success: var(--ti-common-color-success-normal); - --ti-calendar-bg-color-warning: var(--ti-common-color-warning-normal); - --ti-calendar-bg-color-danger: var(--ti-base-color-bg-8); - --ti-calendar-text-color-info: var(--ti-common-color-info-normal); - --ti-calendar-tool-width: var(--ti-common-size-width-normal); - --ti-calendar-content-heard-font-size: var(--ti-common-font-size-1); + --ti-calendar-bg-color-success: var(--ti-common-color-success-normal, #50d4ab); + --ti-calendar-bg-color-warning: var(--ti-common-color-warning-normal, #fa9841); + --ti-calendar-bg-color-danger: var(--ti-base-color-bg-8, #c7000b); + --ti-calendar-text-color-info: var(--ti-common-color-info-normal, #252b3a); + --ti-calendar-tool-width: var(--ti-common-size-width-normal, 80px); + --ti-calendar-content-heard-font-size: var(--ti-common-font-size-1, 14px); --ti-calendar-selected-border-radius: var(--ti-common-radius-large); - --ti-calendar-input-height: var(--ti-common-size-height-normal); - --ti-calendar-selected-border-radius: var(--ti-common-border-radius-normal); + --ti-calendar-input-height: var(--ti-common-size-height-normal, 28px); + --ti-calendar-selected-border-radius: var(--ti-common-border-radius-normal, 2px); --ti-calendar-input-height: var(--ti-common-size-height-minor); - --ti-calendar-input-border-radius: var(--ti-common-border-radius-normal); - --ti-calendar-input-font-size: var(--ti-common-font-size-base); - --ti-calendar-list-item-height: var(--ti-common-size-height-normal); - --ti-calendar-list-item-hover-bg-color: var(--ti-common-color-hover-background); - --ti-calendar-list-item-selected-bg-color: var(--ti-common-color-selected-background); - --ti-calendar-disabled-text-color: var(--ti-common-color-text-disabled); - --ti-calendar-disabled-info-bg-color: var(--ti-base-color-bg-5); - --ti-calendar-disabled-success-bg-color: var(--ti-base-color-bg-5); - --ti-calendar-disabled-warning-bg-color: var(--ti-base-color-bg-5); - --ti-calendar-disabled-error-bg-color: var(--ti-base-color-bg-5); + --ti-calendar-input-border-radius: var(--ti-common-border-radius-normal, 2px); + --ti-calendar-input-font-size: var(--ti-common-font-size-base, 12px); + --ti-calendar-list-item-height: var(--ti-common-size-height-normal, 28px); + --ti-calendar-list-item-hover-bg-color: var(--ti-common-color-hover-background, #f2f5fc); + --ti-calendar-list-item-selected-bg-color: var(--ti-common-color-selected-background, #5e7ce0); + --ti-calendar-disabled-text-color: var(--ti-common-color-text-disabled, #adb0b8); + --ti-calendar-disabled-info-bg-color: var(--ti-base-color-bg-5, #f5f5f6); + --ti-calendar-disabled-success-bg-color: var(--ti-base-color-bg-5, #f5f5f6); + --ti-calendar-disabled-warning-bg-color: var(--ti-base-color-bg-5, #f5f5f6); + --ti-calendar-disabled-error-bg-color: var(--ti-base-color-bg-5, #f5f5f6); } diff --git a/packages/theme/src/card-item/vars.less b/packages/theme/src/card-item/vars.less index b33494a62..bfbe6808b 100644 --- a/packages/theme/src/card-item/vars.less +++ b/packages/theme/src/card-item/vars.less @@ -11,7 +11,7 @@ */ .component-css-vars-card-item() { - --ti-card-item-bg-color: var(--ti-common-color-light); + --ti-card-item-bg-color: var(--ti-common-color-light, #fff); --ti-card-item-border-color: #ccc; --ti-card-item-placeholder-bg-color: rgba(0, 0, 0, 0.05); --ti-card-item-placeholder-border-color: rgba(0, 0, 0, 0.2); @@ -20,8 +20,8 @@ --ti-card-item-remove-icon-color: rgba(0, 0, 0, 0.5); --ti-card-item-remove-icon-hover-bg-color: rgba(255, 255, 255, 0.8); --ti-card-item-remove-icon-hover-text-color: rgba(0, 0, 0, 0.7); - --ti-card-item-header-font-size: var(--ti-common-font-size-1); + --ti-card-item-header-font-size: var(--ti-common-font-size-1, 14px); --ti-card-item-header-text-color: #444; - --ti-card-item-header-height: var(--ti-common-size-10x); - --ti-card-item-header-title-border-color: var(--ti-common-color-bg-dark-deep); + --ti-card-item-header-height: var(--ti-common-size-10x, 40px); + --ti-card-item-header-title-border-color: var(--ti-common-color-bg-dark-deep, #464c59); } diff --git a/packages/theme/src/card-layout/vars.less b/packages/theme/src/card-layout/vars.less index 5336eb5b0..a234c867c 100644 --- a/packages/theme/src/card-layout/vars.less +++ b/packages/theme/src/card-layout/vars.less @@ -11,6 +11,6 @@ */ .component-css-vars-card-layout() { - --ti-card-bg-color: var(--ti-common-color-light); - --ti-card-drop-border-color: var(--ti-base-color-brand-6); + --ti-card-bg-color: var(--ti-common-color-light, #fff); + --ti-card-drop-border-color: var(--ti-base-color-brand-6, #5e7ce0); } diff --git a/packages/theme/src/card-template/vars.less b/packages/theme/src/card-template/vars.less index c2ed88445..24f1061fd 100644 --- a/packages/theme/src/card-template/vars.less +++ b/packages/theme/src/card-template/vars.less @@ -11,20 +11,20 @@ */ .component-css-vars-card-template() { - --ti-card-bg-color: var(--ti-common-color-light); + --ti-card-bg-color: var(--ti-common-color-light, #fff); --ti-card-tool-icon-size: 16px; - --ti-card-tool-icon-color: var(--ti-base-color-brand-6); - --ti-card-tool-hover-icon-color: var(--ti-base-color-brand-5); - --ti-card-tool-active-icon-color: var(--ti-common-color-primary-active); - --ti-card-tool-selector-height: var(--ti-common-size-10x); - --ti-card-tool-selector-text-color: var(--ti-common-color-info-normal); - --ti-card-tool-selector-hover-text-color: var(--ti-base-color-brand-6); - --ti-card-tool-selector-hover-bg-color: var(--ti-common-color-selected-background); - --ti-card-tool-selector-active-text-color: var(--ti-common-color-primary-active); - --ti-card-tool-selector-active-bg-color: var(--ti-common-color-selected-background); + --ti-card-tool-icon-color: var(--ti-base-color-brand-6, #5e7ce0); + --ti-card-tool-hover-icon-color: var(--ti-base-color-brand-5, #7693f5); + --ti-card-tool-active-icon-color: var(--ti-common-color-primary-active, #7693f5); + --ti-card-tool-selector-height: var(--ti-common-size-10x, 40px); + --ti-card-tool-selector-text-color: var(--ti-common-color-info-normal, #252b3a); + --ti-card-tool-selector-hover-text-color: var(--ti-base-color-brand-6, #5e7ce0); + --ti-card-tool-selector-hover-bg-color: var(--ti-common-color-selected-background, #5e7ce0); + --ti-card-tool-selector-active-text-color: var(--ti-common-color-primary-active, #7693f5); + --ti-card-tool-selector-active-bg-color: var(--ti-common-color-selected-background, #5e7ce0); --ti-card-header-height: 46px; - --ti-card-header-border-color: var(--ti-common-color-border); - --ti-card-header-title-font-weight: var(--ti-common-font-weight-7); - --ti-card-header-title-font-size: var(--ti-common-font-size-1); - --ti-card-header-title-text-color: var(--ti-common-color-info-normal); + --ti-card-header-border-color: var(--ti-common-color-border, #adb0b8); + --ti-card-header-title-font-weight: var(--ti-common-font-weight-7, bold); + --ti-card-header-title-font-size: var(--ti-common-font-size-1, 14px); + --ti-card-header-title-text-color: var(--ti-common-color-info-normal, #252b3a); } diff --git a/packages/theme/src/carousel-item/vars.less b/packages/theme/src/carousel-item/vars.less index 39cbe411c..f2574d8fc 100644 --- a/packages/theme/src/carousel-item/vars.less +++ b/packages/theme/src/carousel-item/vars.less @@ -11,9 +11,9 @@ */ .component-css-vars-carousel-item() { - --ti-carousel-item-title-height: var(--ti-common-size-height-small); - --ti-carousel-item-title-text-color: var(--ti-common-color-light); + --ti-carousel-item-title-height: var(--ti-common-size-height-small, 32px); + --ti-carousel-item-title-text-color: var(--ti-common-color-light, #fff); --ti-carousel-item-title-bg-color: rgba(0, 0, 0, 0.3); - --ti-carousel-item-title-span-font-size: var(--ti-common-font-size-base); - --ti-carousel-mask-bg-color: var(--ti-common-color-light); + --ti-carousel-item-title-span-font-size: var(--ti-common-font-size-base, 12px); + --ti-carousel-mask-bg-color: var(--ti-common-color-light, #fff); } diff --git a/packages/theme/src/carousel/vars.less b/packages/theme/src/carousel/vars.less index 0acc7f3d0..0a6e773d4 100644 --- a/packages/theme/src/carousel/vars.less +++ b/packages/theme/src/carousel/vars.less @@ -12,47 +12,47 @@ .component-css-vars-carousel() { // 箭头按钮背景高度 - --ti-carousel-arrow-height: var(--ti-common-size-height-normal); + --ti-carousel-arrow-height: var(--ti-common-size-height-normal, 28px); // 箭头按钮背景宽度 - --ti-carousel-arrow-width: var(--ti-common-size-7x); + --ti-carousel-arrow-width: var(--ti-common-size-7x, 28px); // 左右箭头的字号 - --ti-carousel-arrow-font-size: var(--ti-common-font-size-base); + --ti-carousel-arrow-font-size: var(--ti-common-font-size-base, 12px); // 左右箭头按钮悬浮背景色 --ti-carousel-arrow-hover-bg-color: rgba(0, 0, 0, 0.6); // 左右箭头按钮背景色 --ti-carousel-arrow-bg-color: rgba(0, 0, 0, 0.3); // 左右箭头阴影(hide) - --ti-carousel-arrow-box-shadow: var(--ti-common-shadow-none); + --ti-carousel-arrow-box-shadow: var(--ti-common-shadow-none, none); // 箭头点击瞬间文本色(hide) - --ti-carousel-arrow-active-text-color: var(--ti-common-color-light); + --ti-carousel-arrow-active-text-color: var(--ti-common-color-light, #fff); // 指示器盒子的背景色 --ti-carousel-indicators-bg-color: rgba(3, 2, 2, 0.3); // 指示器盒子的圆角大小 --ti-carousel-indicators-border-radius: 13px; // 指示器盒子的高度 - --ti-carousel-indicators-height: var(--ti-common-size-4x); + --ti-carousel-indicators-height: var(--ti-common-size-4x, 16px); // 指示器圆角的背景色(hide) --ti-carousel-indicators-radius-bg-color: rgba(0, 0, 0, 0.3); // 幻灯片内的当前指示器图标色 - --ti-carousel-indicator-active-text-color: var(--ti-common-color-light); + --ti-carousel-indicator-active-text-color: var(--ti-common-color-light, #fff); // 指示器按钮宽度 - --ti-carousel-indicator-button-width: var(--ti-common-size-2x); + --ti-carousel-indicator-button-width: var(--ti-common-size-2x, 8px); // 指示器按钮高度 - --ti-carousel-indicator-button-height: var(--ti-common-size-2x); + --ti-carousel-indicator-button-height: var(--ti-common-size-2x, 8px); // 非当前指示器背景色 - --ti-carousel-indicator-button-bg-color: var(--ti-common-color-info-disabled); + --ti-carousel-indicator-button-bg-color: var(--ti-common-color-info-disabled, #bfbfbf); // 指示器项右外边距 - --ti-carousel-indicator-margin-right: var(--ti-common-space-0); + --ti-carousel-indicator-margin-right: var(--ti-common-space-0, 0px); // 当前指示器右边距 - --ti-carousel-indicator-active-width: var(--ti-common-size-3x); + --ti-carousel-indicator-active-width: var(--ti-common-size-3x, 12px); // 指示器项垂直内边距(hide) - --ti-carousel-indicator-padding-vertical: var(--ti-common-space-0); + --ti-carousel-indicator-padding-vertical: var(--ti-common-space-0, 0px); // 指示器项水平内边距 - --ti-carousel-indicator-padding-horizontal: calc(var(--ti-common-space-1) * 2); + --ti-carousel-indicator-padding-horizontal: calc(var(--ti-common-space-1, 1px) * 2); // 当前指示器动画属性(hide) --ti-carousel-indicator-active-transition-property: none; // 当前指示器背景色 - --ti-carousel-indicator-active-background-color: var(--ti-base-color-transparent); + --ti-carousel-indicator-active-background-color: var(--ti-base-color-transparent, transparent); // 当前指示器的宽度 --ti-carousel-indicator-active-button-width: var(--ti-carousel-indicator-button-width); // 当前指示器圆角 @@ -60,11 +60,11 @@ // 幻灯片外的指示器动画(hide) --ti-carousel-indicator-active-transition: none; // 幻灯片外的指示器默认背景色 - --ti-carousel-outside-button-bg-color: var(--ti-common-color-dark); + --ti-carousel-outside-button-bg-color: var(--ti-common-color-dark, #000); // 幻灯片外的当前指示器背景色 - --ti-carousel-outside-button-active-bg-color: var(--ti-common-color-bg-dark-deep); + --ti-carousel-outside-button-active-bg-color: var(--ti-common-color-bg-dark-deep, #464c59); // 标签按钮的字号(hide) - --ti-carousel-labels-button-font-size: var(--ti-common-font-size-base); + --ti-carousel-labels-button-font-size: var(--ti-common-font-size-base, 12px); // 幻灯片悬浮时的透明度(hide) --ti-carousel-hover-opacity: 0.6; } \ No newline at end of file diff --git a/packages/theme/src/cascader-menu/vars.less b/packages/theme/src/cascader-menu/vars.less index 181265e0c..b10c02a92 100644 --- a/packages/theme/src/cascader-menu/vars.less +++ b/packages/theme/src/cascader-menu/vars.less @@ -12,19 +12,19 @@ .component-css-vars-cascader-menu() { // 下拉菜单文本色 - --ti-cascader-menu-text-color: var(--ti-common-color-text-primary); + --ti-cascader-menu-text-color: var(--ti-common-color-text-primary, #252b3a); // 下拉菜单边框色 - --ti-cascader-menu-border-color: var(--ti-common-color-line-disabled); + --ti-cascader-menu-border-color: var(--ti-common-color-line-disabled, #dfe1e6); // 下拉菜单为空时的文本色 - --ti-cascader-menu-empty-text-color: var(--ti-common-color-text-weaken); + --ti-cascader-menu-empty-text-color: var(--ti-common-color-text-weaken, #8a8e99); // 下拉菜单列表垂直方向的内边距 - --ti-cascader-menu-list-padding-vertical: var(--ti-common-space-0); + --ti-cascader-menu-list-padding-vertical: var(--ti-common-space-0, 0px); // 下拉菜单列表水平方向的内边距 - --ti-cascader-menu-list-padding-horizontal: var(--ti-common-space-0); + --ti-cascader-menu-list-padding-horizontal: var(--ti-common-space-0, 0px); // 下拉菜单列表垂直方向的外边距 - --ti-cascader-menu-list-padding-vertical: var(--ti-common-space-0); + --ti-cascader-menu-list-padding-vertical: var(--ti-common-space-0, 0px); // 下拉菜单列表水平方向的外边距 - --ti-cascader-menu-list-padding-horizontal: var(--ti-common-space-0); + --ti-cascader-menu-list-padding-horizontal: var(--ti-common-space-0, 0px); // 下拉菜单的宽度 --ti-cascader-menu-width: 180px; } diff --git a/packages/theme/src/cascader-node/vars.less b/packages/theme/src/cascader-node/vars.less index 71c8ae41f..9d8ba5a24 100644 --- a/packages/theme/src/cascader-node/vars.less +++ b/packages/theme/src/cascader-node/vars.less @@ -12,37 +12,37 @@ .component-css-vars-cascader-node() { // 下拉列表子项的背景色 - --ti-cascader-node-hover-bg-color: var(--ti-common-color-bg-white-emphasize); + --ti-cascader-node-hover-bg-color: var(--ti-common-color-bg-white-emphasize, #f2f5fc); // 下拉列表子项悬浮时的文本色 - --ti-cascader-node-hover-text-color: var(--ti-common-color-text-highlight); + --ti-cascader-node-hover-text-color: var(--ti-common-color-text-highlight, #526ecc); // 下拉列表子项的文本色 - --ti-cascader-node-text-color: var(--ti-common-color-text-white); + --ti-cascader-node-text-color: var(--ti-common-color-text-white, #fff); // 下拉列表子项选中后悬浮时的背景色 - --ti-cascader-node-selectable-hover-bg-color: var(--ti-common-color-selected-background); + --ti-cascader-node-selectable-hover-bg-color: var(--ti-common-color-selected-background, #5e7ce0); // 下拉列表子项选中时的文本色 - --ti-cascader-node-selectable-text-color: var(--ti-common-color-selected-text-color); + --ti-cascader-node-selectable-text-color: var(--ti-common-color-selected-text-color, #fff); // 下拉列表子项禁用状态时的文本色 - --ti-cascader-node-disabled-text-color: var(--ti-common-color-text-disabled); + --ti-cascader-node-disabled-text-color: var(--ti-common-color-text-disabled, #adb0b8); // 下拉列表子项禁用状态时的背景色 - --ti-cascader-node-disabled-bg-color: var(--ti-common-color-bg-disabled); + --ti-cascader-node-disabled-bg-color: var(--ti-common-color-bg-disabled, #f5f5f6); // 下拉列表子项的icon图标的字体大小 - --ti-cascader-node-icon-font-size: calc(var(--ti-common-font-size-1) - 4px); + --ti-cascader-node-icon-font-size: calc(var(--ti-common-font-size-1, 14px) - 4px); // 下拉列表子项的icon图标的色 - --ti-cascader-node-icon-color: var(--ti-common-color-icon-normal); + --ti-cascader-node-icon-color: var(--ti-common-color-icon-normal, #575d6c); // 下拉列表子项禁用时的icon图标的色 - --ti-cascader-node-disabled-icon-color: var(--ti-common-color-icon-normal); + --ti-cascader-node-disabled-icon-color: var(--ti-common-color-icon-normal, #575d6c); // 下拉列表子项的选中时icon图标的色 - --ti-cascader-node-active-icon-color: var(--ti-common-color-icon-white); + --ti-cascader-node-active-icon-color: var(--ti-common-color-icon-white, #fff); // 下拉列表子项的前缀display --ti-cascader-node-prefix-display: 'inline-block'; // 下拉列表子项的标签的垂直方向的内边距 - --ti-cascader-node-label-padding-vertical: var(--ti-common-space-0); + --ti-cascader-node-label-padding-vertical: var(--ti-common-space-0, 0px); // 下拉列表子项的标签的水平方向的内边距 - --ti-cascader-node-label-padding-horizontal: var(--ti-common-space-10); + --ti-cascader-node-label-padding-horizontal: var(--ti-common-space-10, 10px); // 下拉列表子项的单选按钮右侧外边距 - --ti-cascader-node-radio-margin-right: var(--ti-common-space-base); + --ti-cascader-node-radio-margin-right: var(--ti-common-space-base, 4px); // 下拉列表子项聚焦时的背景色 - --ti-cascader-node-selectable-active-bg-color: var(--ti-common-color-selected-background); + --ti-cascader-node-selectable-active-bg-color: var(--ti-common-color-selected-background, #5e7ce0); // 下拉列表子项icon距离右侧距离 --ti-cascader-node-postfix-right: 10px; // 下拉列表子项最大宽度 diff --git a/packages/theme/src/cascader-panel/vars.less b/packages/theme/src/cascader-panel/vars.less index c772b94d4..e585d84f1 100644 --- a/packages/theme/src/cascader-panel/vars.less +++ b/packages/theme/src/cascader-panel/vars.less @@ -12,21 +12,21 @@ .component-css-vars-cascader-panel() { // 下拉菜单面板的边框圆角 - --ti-cascader-panel-border-radius: var(--ti-common-border-radius-normal); + --ti-cascader-panel-border-radius: var(--ti-common-border-radius-normal, 2px); // 下拉菜单面板的边框色 - --ti-cascader-panel-border-color: var(--ti-common-color-line-disabled); + --ti-cascader-panel-border-color: var(--ti-common-color-line-disabled, #dfe1e6); // 下拉菜单面板的字体大小 - --ti-cascader-panel-font-size: var(--ti-common-font-size-base); + --ti-cascader-panel-font-size: var(--ti-common-font-size-base, 12px); // 下拉菜单面板子项的高度 - --ti-cascader-panel-node-height: var(--ti-common-size-height-normal); + --ti-cascader-panel-node-height: var(--ti-common-size-height-normal, 28px); // 下拉菜单面板中子项的顶部外边距 - --ti-cascader-panel-node-margin-top: var(--ti-common-space-0); + --ti-cascader-panel-node-margin-top: var(--ti-common-space-0, 0px); // 下拉菜单面板中子项的垂直方向的外边距 - --ti-cascader-panel-node-label-padding-vertical: var(--ti-common-space-0); + --ti-cascader-panel-node-label-padding-vertical: var(--ti-common-space-0, 0px); // 下拉菜单面板中子项的标签的右侧内边距 - --ti-cascader-panel-node-label-padding-right: calc(var(--ti-common-space-8x) - 2px); + --ti-cascader-panel-node-label-padding-right: calc(var(--ti-common-space-8x, 32px) - 2px); // 下拉菜单面板中子项的标签的左侧内边距 - --ti-cascader-panel-node-label-padding-left: var(--ti-common-space-5x); + --ti-cascader-panel-node-label-padding-left: var(--ti-common-space-5x, 20px); // 下拉菜单面板中子项的边框圆角 - --ti-cascader-panel-node-border-radius: var(--ti-common-border-radius-normal); + --ti-cascader-panel-node-border-radius: var(--ti-common-border-radius-normal, 2px); } diff --git a/packages/theme/src/cascader/vars.less b/packages/theme/src/cascader/vars.less index 4622f04ea..ddfad6f84 100644 --- a/packages/theme/src/cascader/vars.less +++ b/packages/theme/src/cascader/vars.less @@ -12,17 +12,17 @@ .component-css-vars-cascader() { // 字体大小 - --ti-cascader-font-size: var(--ti-common-font-size-1); + --ti-cascader-font-size: var(--ti-common-font-size-1, 14px); // 悬浮时显示的边框色 - --ti-cascader-hover-border-color: var(--ti-common-color-line-hover); + --ti-cascader-hover-border-color: var(--ti-common-color-line-hover, #575d6c); // 聚焦时显示的边框色 - --ti-cascader-focus-border-color: var(--ti-common-color-line-active); + --ti-cascader-focus-border-color: var(--ti-common-color-line-active, #5e7ce0); // 边框圆角 - --ti-cascader-border-radius: var(--ti-common-border-radius-1); + --ti-cascader-border-radius: var(--ti-common-border-radius-1, 4px); // icon图标色 - --ti-cascader-icon-color: var(--ti-common-color-icon-graybg-normal); + --ti-cascader-icon-color: var(--ti-common-color-icon-graybg-normal, #adb0b8); // medium尺寸时的字体大小 - --ti-cascader-medium-font-size: var(--ti-common-font-size-1); + --ti-cascader-medium-font-size: var(--ti-common-font-size-1, 14px); // medium尺寸时的行高 --ti-cascader-medium-line-height: 36px; // small尺寸时的行高 @@ -32,85 +32,85 @@ // small尺寸时的字体大小 --ti-cascader-small-font-size: var(--ti-common-font-size-bas); // mini尺寸时的字体大小 - --ti-cascader-mini-font-size: var(--ti-common-font-size-base); + --ti-cascader-mini-font-size: var(--ti-common-font-size-base, 12px); // 禁用状态时的文本色 - --ti-cascader-disabled-text-color: var(--ti-common-color-text-disabled); + --ti-cascader-disabled-text-color: var(--ti-common-color-text-disabled, #adb0b8); // 下拉框背景色 - --ti-cascader-dropdown-bg-color: var(--ti-common-color-bg-white-normal); + --ti-cascader-dropdown-bg-color: var(--ti-common-color-bg-white-normal, #fff); // 输入框标签背景色 - --ti-cascader-tag-bg-color: var(--ti-common-color-bg-white-emphasize); + --ti-cascader-tag-bg-color: var(--ti-common-color-bg-white-emphasize, #f2f5fc); // 输入框标签的icon图标背景色 - --ti-cascader-tag-icon-bg-color: var(--ti-common-color-icon-graybg-disabled); + --ti-cascader-tag-icon-bg-color: var(--ti-common-color-icon-graybg-disabled, #dfe1e6); // 输入框标签的icon图标色 - --ti-cascader-tag-icon-color: var(--ti-common-color-icon-white); + --ti-cascader-tag-icon-color: var(--ti-common-color-icon-white, #fff); // 输入框标签的icon图标悬浮时显示的背景色 - --ti-cascader-tag-icon-hover-bg-color: var(--ti-common-color-icon-graybg-normal); + --ti-cascader-tag-icon-hover-bg-color: var(--ti-common-color-icon-graybg-normal, #adb0b8); // 下拉列表的文本色（没有生效） - --ti-cascader-list-text-color: var(--ti-common-color-text-secondary); + --ti-cascader-list-text-color: var(--ti-common-color-text-secondary, #575d6c); // 下拉列表子项的高度（没有生效） - --ti-cascader-item-height: var(--ti-common-size-height-normal); + --ti-cascader-item-height: var(--ti-common-size-height-normal, 28px); // 下拉列表子项悬浮时的背景色（没有生效） --ti-cascader-item-hover-bg-color: #f5f7fa; // 下拉列表子项选中时的文本色（没有生效） --ti-cascader-item-checked-text-color: var(--ti-base-color-primary-active); // 搜索后下拉列表无匹配数据的文本色 - --ti-cascader-empty-text-color: var(--ti-common-color-text-weaken); + --ti-cascader-empty-text-color: var(--ti-common-color-text-weaken, #8a8e99); // 搜索框的文本色（没有生效） - --ti-cascader-search-input-text-color: var(--ti-common-color-info-normal); + --ti-cascader-search-input-text-color: var(--ti-common-color-info-normal, #252b3a); // 搜索框的占位符的文本色（没有生效） - --ti-cascader-search-input-placeholder-text-color: var(--ti-common-color-placeholder); + --ti-cascader-search-input-placeholder-text-color: var(--ti-common-color-placeholder, #adb0b8); // 下拉框的阴影 --ti-cascader-dropdown-box-shadow: var(--ti-common-box-shadow); // 多选模式输入框宽度 --ti-cascader-width: '100%'; // 下拉框的左侧外边距 - --ti-cascader-dropdown-margin-left: var(--ti-common-space-0); + --ti-cascader-dropdown-margin-left: var(--ti-common-space-0, 0px); // 下拉框的右侧侧外边距 - --ti-cascader-dropdown-margin-right: var(--ti-common-space-0); + --ti-cascader-dropdown-margin-right: var(--ti-common-space-0, 0px); // 下拉框的顶部外边距 - --ti-cascader-dropdown-margin-top: calc(var(--ti-common-space-6) - 1px); + --ti-cascader-dropdown-margin-top: calc(var(--ti-common-space-6, 6px) - 1px); // 下拉框的底部外边距 - --ti-cascader-dropdown-margin-bottom: calc(var(--ti-common-space-6) - 1px); + --ti-cascader-dropdown-margin-bottom: calc(var(--ti-common-space-6, 6px) - 1px); // 输入框标签左侧外边距 - --ti-cascader-tag-margin-left: var(--ti-common-space-6); + --ti-cascader-tag-margin-left: var(--ti-common-space-6, 6px); // 输入框标签右侧外边距 - --ti-cascader-tag-margin-right: var(--ti-common-space-0); + --ti-cascader-tag-margin-right: var(--ti-common-space-0, 0px); // 输入框标签顶部外边距 - --ti-cascader-tag-margin-top: calc(var(--ti-common-space-1) + 1px); + --ti-cascader-tag-margin-top: calc(var(--ti-common-space-1, 1px) + 1px); // 输入框标签底部外边距 - --ti-cascader-tag-margin-bottom: calc(var(--ti-common-space-1) + 1px); + --ti-cascader-tag-margin-bottom: calc(var(--ti-common-space-1, 1px) + 1px); // 下拉框列表的左侧外边距（没有生效） - --ti-cascader-list-margin-left: var(--ti-common-space-0); + --ti-cascader-list-margin-left: var(--ti-common-space-0, 0px); // 下拉框列表的右侧外边距（没有生效） - --ti-cascader-list-margin-right: var(--ti-common-space-0); + --ti-cascader-list-margin-right: var(--ti-common-space-0, 0px); // 下拉框列表的顶部外边距（没有生效） - --ti-cascader-list-margin-top: var(--ti-common-space-0); + --ti-cascader-list-margin-top: var(--ti-common-space-0, 0px); // 下拉框列表的底部外边距（没有生效） - --ti-cascader-list-margin-bottom: var(--ti-common-space-0); + --ti-cascader-list-margin-bottom: var(--ti-common-space-0, 0px); // 下拉框列表的左侧外边距（没有生效） - --ti-cascader-list-padding-left: var(--ti-common-space-0); + --ti-cascader-list-padding-left: var(--ti-common-space-0, 0px); // 下拉框列表的右侧外边距（没有生效） - --ti-cascader-list-padding-right: var(--ti-common-space-0); + --ti-cascader-list-padding-right: var(--ti-common-space-0, 0px); // 下拉框列表的顶部外边距（没有生效） - --ti-cascader-list-padding-top: var(--ti-common-space-6); + --ti-cascader-list-padding-top: var(--ti-common-space-6, 6px); // 下拉框列表的底部外边距（没有生效） - --ti-cascader-list-padding-bottom: var(--ti-common-space-6); + --ti-cascader-list-padding-bottom: var(--ti-common-space-6, 6px); // 搜索后下拉列表无匹配数据左侧外边距 - --ti-cascader-empty-margin-left: var(--ti-common-space-0); + --ti-cascader-empty-margin-left: var(--ti-common-space-0, 0px); // 搜索后下拉列表无匹配数据右侧外边距 - --ti-cascader-empty-margin-right: var(--ti-common-space-0); + --ti-cascader-empty-margin-right: var(--ti-common-space-0, 0px); // 搜索后下拉列表无匹配数据顶部外边距 - --ti-cascader-empty-margin-top: var(--ti-common-space-10); + --ti-cascader-empty-margin-top: var(--ti-common-space-10, 10px); // 搜索后下拉列表无匹配数据底部外边距 - --ti-cascader-empty-margin-bottom: var(--ti-common-space-10); + --ti-cascader-empty-margin-bottom: var(--ti-common-space-10, 10px); // 搜索框的左侧外边距（没有生效） - --ti-cascader-search-input-margin-left: calc(var(--ti-common-space-1) + 1px); + --ti-cascader-search-input-margin-left: calc(var(--ti-common-space-1, 1px) + 1px); // 搜索框的左侧内边距（没有生效） - --ti-cascader-search-input-padding-left: var(--ti-common-space-2x); + --ti-cascader-search-input-padding-left: var(--ti-common-space-2x, 8px); // 下拉列表子项的字体大小 - --ti-cascader-item-font-size: var(--ti-common-font-size-base); + --ti-cascader-item-font-size: var(--ti-common-font-size-base, 12px); // 搜索框的字体大小（没有生效） - --ti-cascader-search-input-font-size: var(--ti-common-font-size-base); + --ti-cascader-search-input-font-size: var(--ti-common-font-size-base, 12px); // 输入框关闭图标hover时的颜色 - --ti-cascader-close-hover-icon-color: var(--ti-common-color-border-hover); + --ti-cascader-close-hover-icon-color: var(--ti-common-color-border-hover, #575d6c); } diff --git a/packages/theme/src/chart-core/vars.less b/packages/theme/src/chart-core/vars.less index 74d80a5cb..9894eb443 100644 --- a/packages/theme/src/chart-core/vars.less +++ b/packages/theme/src/chart-core/vars.less @@ -12,6 +12,6 @@ .component-css-vars-chart-core() { --ti-chart-core-data-empty-text-color: #888; - --ti-chart-core-data-empty-font-size: var(--ti-common-font-size-1); + --ti-chart-core-data-empty-font-size: var(--ti-common-font-size-1, 14px); --ti-chart-core-data-empty-bg-color: rgba(255, 255, 255, 0.9); } diff --git a/packages/theme/src/checkbox-button/vars.less b/packages/theme/src/checkbox-button/vars.less index d9080ed97..b285ecb49 100644 --- a/packages/theme/src/checkbox-button/vars.less +++ b/packages/theme/src/checkbox-button/vars.less @@ -12,29 +12,29 @@ .component-css-vars-checkbox-button() { // 按钮形式复选框背景色 - --ti-checkbox-button-bg-color: var(--ti-common-color-bg-light-normal); + --ti-checkbox-button-bg-color: var(--ti-common-color-bg-light-normal, #e9edfa); // 按钮形式复选框选中项左边框阴影色(水平方向首个除外) --ti-checkbox-shadow-color: #dfe1e6; // 按钮形式复选框字号 - --ti-checkbox-button-font-size: var(--ti-common-font-size-base); + --ti-checkbox-button-font-size: var(--ti-common-font-size-base, 12px); // 按钮形式复选框未选中项悬浮文本色 - --ti-checkbox-button-hover-text-color: var(--ti-common-color-text-white); + --ti-checkbox-button-hover-text-color: var(--ti-common-color-text-white, #fff); // 按钮形式选中项边框色 - --ti-checkbox-button-checked-border-color: var(--ti-common-color-line-active); + --ti-checkbox-button-checked-border-color: var(--ti-common-color-line-active, #5e7ce0); // 按钮形式复选框禁用文本色 - --ti-checkbox-button-disabled-text-color: var(--ti-common-color-text-disabled); + --ti-checkbox-button-disabled-text-color: var(--ti-common-color-text-disabled, #adb0b8); // 按钮形式复选框垂直布局，选中项禁用时的背景色 - --ti-checkbox-disabled-bg-color: var(--ti-common-color-bg-disabled); + --ti-checkbox-disabled-bg-color: var(--ti-common-color-bg-disabled, #f5f5f6); // 按钮形式复选框禁用背景色 - --ti-checkbox-button-disabled-bg-color: var(--ti-common-color-bg-disabled); + --ti-checkbox-button-disabled-bg-color: var(--ti-common-color-bg-disabled, #f5f5f6); // 按钮形式复选框未选中项文本色 - --ti-checkbox-button-text-color: var(--ti-common-color-info-normal); + --ti-checkbox-button-text-color: var(--ti-common-color-info-normal, #252b3a); // 按钮形式复选框选中项文本色 - --ti-checkbox-button-checked-text-color: var(--ti-common-color-text-white); + --ti-checkbox-button-checked-text-color: var(--ti-common-color-text-white, #fff); // 按钮形式复选框选中项背景色 - --ti-checkbox-button-checked-bg-color: var(--ti-common-color-bg-emphasize); + --ti-checkbox-button-checked-bg-color: var(--ti-common-color-bg-emphasize, #5e7ce0); // 按钮形式复选框悬浮背景色 - --ti-checkbox-button-bg-color-hover: var(--ti-common-color-bg-hover); + --ti-checkbox-button-bg-color-hover: var(--ti-common-color-bg-hover, #344899); // 按钮形式复选框边框色 --ti-checkbox-button-border-color: #e9edfa; // 按钮形式复选框悬浮默认边框色 @@ -52,7 +52,7 @@ // 按钮组小按钮外边距 --ti-checkbox-button-mini-margin-horizontal: 2px; // 按钮组小按钮字号 - --ti-checkbox-button-size-mini-font-size: var(--ti-common-font-size-base); + --ti-checkbox-button-size-mini-font-size: var(--ti-common-font-size-base, 12px); // 按钮组小按钮圆角 --ti-checkbox-button-size-mini-border-radius: 0px; // 按钮组small按钮内间距 @@ -66,13 +66,13 @@ // 小尺寸按钮组按钮内间距 --ti-checkbox-button-mini-padding-horizontal: 12px; // 小尺寸按钮左侧圆角 - --ti-checkbox-button-mini-left-border-radius: var(--ti-common-border-radius-normal); + --ti-checkbox-button-mini-left-border-radius: var(--ti-common-border-radius-normal, 2px); // 小尺寸按钮右侧圆角 --ti-checkbox-button-mini-right-border-radius: 0px; // 小尺寸按钮组最后一个按钮顶部左侧圆角 --ti-checkbox-button-mini-last-left-border-radius: 0px; // 小尺寸按钮组最后一个按钮右侧圆角 - --ti-checkbox-button-mini-last-right-border-radius: var(--ti-common-border-radius-normal); + --ti-checkbox-button-mini-last-right-border-radius: var(--ti-common-border-radius-normal, 2px); // 默认按钮组右侧按钮圆角 --ti-checkbox-button-right-border-radius: 0px; // 默认按钮组第一个按钮左侧按钮圆角 diff --git a/packages/theme/src/checkbox-group/vars.less b/packages/theme/src/checkbox-group/vars.less index 24a8eec95..fff6df414 100644 --- a/packages/theme/src/checkbox-group/vars.less +++ b/packages/theme/src/checkbox-group/vars.less @@ -12,13 +12,13 @@ .component-css-vars-checkbox-group() { // 垂直复选框和行间距(hide) - --ti-checkbox-group-margin-bottom: var(--ti-common-space-2x); + --ti-checkbox-group-margin-bottom: var(--ti-common-space-2x, 8px); // 默认换行 --ti-checkbox-group-flex-wrap: wrap; // 按钮组按钮外边距 - --ti-checkbox-group-margin-top: var(--ti-common-space-0); + --ti-checkbox-group-margin-top: var(--ti-common-space-0, 0px); // 垂直按钮组第一个子元素边框圆角 - --ti-checkbox-group-1st-child-border-radius: var(--ti-common-space-0); + --ti-checkbox-group-1st-child-border-radius: var(--ti-common-space-0, 0px); // 垂直按钮组最后一个子元素边框圆角 - --ti-checkbox-group-last-child-border-radius: var(--ti-common-space-0); + --ti-checkbox-group-last-child-border-radius: var(--ti-common-space-0, 0px); } diff --git a/packages/theme/src/checkbox/vars.less b/packages/theme/src/checkbox/vars.less index f77fec888..17852a316 100644 --- a/packages/theme/src/checkbox/vars.less +++ b/packages/theme/src/checkbox/vars.less @@ -12,67 +12,67 @@ .component-css-vars-checkbox() { // 复选框宽度 - --ti-checkbox-width: var(--ti-common-size-4x); + --ti-checkbox-width: var(--ti-common-size-4x, 16px); // 复选框高度 - --ti-checkbox-height: var(--ti-common-size-4x); + --ti-checkbox-height: var(--ti-common-size-4x, 16px); // 默认复选框文本色 - --ti-checkbox-text-font-family: var(--ti-common-font-family); + --ti-checkbox-text-font-family: var(--ti-common-font-family, 'Helvetica', 'Arial', 'PingFangSC-Regular', 'Hiragino Sans GB', 'Microsoft YaHei', '微软雅黑', 'Microsoft JhengHei'); // 默认复选框文本色 - --ti-checkbox-text-color: var(--ti-common-color-info-normal); + --ti-checkbox-text-color: var(--ti-common-color-info-normal, #252b3a); // 默认复选框字号 - --ti-checkbox-font-size: var(--ti-common-font-size-base); + --ti-checkbox-font-size: var(--ti-common-font-size-base, 12px); // 默认复选框未选中项背景色 - --ti-checkbox-bg-color: var(--ti-common-color-transparent); + --ti-checkbox-bg-color: var(--ti-common-color-transparent, transparent); // 默认复选框选中项背景色 - --ti-checkbox-bg-color-checked: var(--ti-common-color-bg-emphasize); + --ti-checkbox-bg-color-checked: var(--ti-common-color-bg-emphasize, #5e7ce0); // 默认复选框选中项边框色 - --ti-checkbox-border-color-checked: var(--ti-common-color-line-active); + --ti-checkbox-border-color-checked: var(--ti-common-color-line-active, #5e7ce0); // 默认复选框未选中项边框色 - --ti-checkbox-border-color: var(--ti-common-color-line-normal); + --ti-checkbox-border-color: var(--ti-common-color-line-normal, #adb0b8); // 默认复选框选中项悬浮背景色 + - --ti-checkbox-bg-color-hover-checked: var(--ti-common-color-bg-hover); + --ti-checkbox-bg-color-hover-checked: var(--ti-common-color-bg-hover, #344899); // 默认复选框选中项悬浮边框色 + - --ti-checkbox-border-color-hover-checked: var(--ti-common-color-bg-hover); + --ti-checkbox-border-color-hover-checked: var(--ti-common-color-bg-hover, #344899); // 默认复选框未选中项悬浮边框色 - --ti-checkbox-border-color-hover: var(--ti-common-color-line-active); + --ti-checkbox-border-color-hover: var(--ti-common-color-line-active, #5e7ce0); // 默认复选框字号(hide) - --ti-checkbox-font-normal-line-height: var(--ti-common-line-height-base); + --ti-checkbox-font-normal-line-height: var(--ti-common-line-height-base, 12px); // 默认复选框字号(hide) - --ti-checkbox-font-medium-line-height: var(--ti-common-line-height-3); + --ti-checkbox-font-medium-line-height: var(--ti-common-line-height-3, 18px); // 默认复选框字号(hide) - --ti-checkbox-font-small-line-height: var(--ti-common-line-height-2); + --ti-checkbox-font-small-line-height: var(--ti-common-line-height-2, 16px); // 默认复选框字号(hide) - --ti-checkbox-font-mini-line-height: var(--ti-common-line-height-base); + --ti-checkbox-font-mini-line-height: var(--ti-common-line-height-base, 12px); // 默认复选框选中项图标高度 - --ti-checkbox-icon-height: var(--ti-common-size-2x); + --ti-checkbox-icon-height: var(--ti-common-size-2x, 8px); // 默认复选框选中项图标宽度 - --ti-checkbox-icon-width: var(--ti-common-size-base); + --ti-checkbox-icon-width: var(--ti-common-size-base, 4px); // 默认复选框对勾的左边距 - --ti-checkbox-icon-margin-left: var(--ti-common-space-base); + --ti-checkbox-icon-margin-left: var(--ti-common-space-base, 4px); // 默认复选框对勾的顶边距 - --ti-checkbox-icon-margin-top: var(--ti-common-space-0); + --ti-checkbox-icon-margin-top: var(--ti-common-space-0, 0px); // 默认复选框禁用时，未选中时背景色 - --ti-checkbox-bg-color-disable: var(--ti-common-color-bg-disabled); + --ti-checkbox-bg-color-disable: var(--ti-common-color-bg-disabled, #f5f5f6); // 默认复选框禁用时，选中项对勾颜色以及半选时中间方框颜色 - --ti-checkbox-icon-color-disabled: var(--ti-common-color-text-disabled); + --ti-checkbox-icon-color-disabled: var(--ti-common-color-text-disabled, #adb0b8); // 默认复选框未选中项禁用边框色 - --ti-checkbox-border-color-unchecked-disabled: var(--ti-common-color-line-disabled); + --ti-checkbox-border-color-unchecked-disabled: var(--ti-common-color-line-disabled, #dfe1e6); // 默认复选框禁用时，label文本色 - --ti-checkbox-label-text-color-disabled: var(--ti-common-color-text-disabled); + --ti-checkbox-label-text-color-disabled: var(--ti-common-color-text-disabled, #adb0b8); // 默认复选框禁用时，选中项背景颜色 - --ti-checkbox-bg-color-checked-disabled: var(--ti-common-color-bg-disabled); + --ti-checkbox-bg-color-checked-disabled: var(--ti-common-color-bg-disabled, #f5f5f6); // 默认复选框禁用时，选中项边框颜色 - --ti-checkbox-border-color-checked-disabled: var(--ti-common-color-line-disabled); + --ti-checkbox-border-color-checked-disabled: var(--ti-common-color-line-disabled, #dfe1e6); // 默认复选框边框圆角 - --ti-checkbox-border-radius: var(--ti-common-border-radius-normal); + --ti-checkbox-border-radius: var(--ti-common-border-radius-normal, 2px); // 默认复选框边框圆角 - --ti-checkbox-checkline-width: var(--ti-common-border-weight-1); + --ti-checkbox-checkline-width: var(--ti-common-border-weight-1, 2px); // 默认复选框的右侧外边距 - --ti-checkbox-label-margin-right: var(--ti-common-space-5x); + --ti-checkbox-label-margin-right: var(--ti-common-space-5x, 20px); } diff --git a/packages/theme/src/collapse-item/vars.less b/packages/theme/src/collapse-item/vars.less index 7e575f5c9..1bf61c4b9 100644 --- a/packages/theme/src/collapse-item/vars.less +++ b/packages/theme/src/collapse-item/vars.less @@ -12,11 +12,11 @@ .component-css-vars-collapse-item() { // 面板默认文本色 - --ti-collapse-item-text-color: var(--ti-common-color-text-primary); + --ti-collapse-item-text-color: var(--ti-common-color-text-primary, #252b3a); // 面板背景色 - --ti-collapse-item-bg-color: var(--ti-common-color-bg-white-normal); + --ti-collapse-item-bg-color: var(--ti-common-color-bg-white-normal, #fff); // 面板边框色 - --ti-collapse-item-border-color: var(--ti-common-color-line-dividing); + --ti-collapse-item-border-color: var(--ti-common-color-line-dividing, #dfe1e6); // 面板左边框色 --ti-collapse-item-border-color-left: var(--ti-collapse-item-border-color); // 面板右边框色 @@ -30,33 +30,33 @@ // 面板禁用时上边框色 --ti-collapse-item-disabled-border-color-top: var(--ti-collapse-item-border-color); // 面板圆角 - --ti-collapse-item-border-radius: var(--ti-common-border-radius-normal); + --ti-collapse-item-border-radius: var(--ti-common-border-radius-normal, 2px); // 面板顶部外边距 - --ti-collapse-item-margin-top: var(--ti-common-space-2x); + --ti-collapse-item-margin-top: var(--ti-common-space-2x, 8px); // 面板头部最小高度 - --ti-collapse-item-header-min-height: var(--ti-common-size-8x); + --ti-collapse-item-header-min-height: var(--ti-common-size-8x, 32px); // 面板头部向下箭头图标色 - --ti-collapse-item-icon-color: var(--ti-common-color-icon-normal); + --ti-collapse-item-icon-color: var(--ti-common-color-icon-normal, #575d6c); // 面板内容背景色 - --ti-collapse-item-wrap-bg-color: var(--ti-common-color-light); + --ti-collapse-item-wrap-bg-color: var(--ti-common-color-light, #fff); // 面板禁用文本色 - --ti-collapse-item-disabled-text-color: var(--ti-common-color-text-disabled); + --ti-collapse-item-disabled-text-color: var(--ti-common-color-text-disabled, #adb0b8); // 面板禁用背景色 - --ti-collapse-item-disabled-header-bg-color: var(--ti-common-color-bg-disabled); + --ti-collapse-item-disabled-header-bg-color: var(--ti-common-color-bg-disabled, #f5f5f6); // 面板头部字号 - --ti-collapse-item-header-font-size: var(--ti-common-font-size-base); + --ti-collapse-item-header-font-size: var(--ti-common-font-size-base, 12px); // 面板头部字重 - --ti-collapse-item-header-font-weight: var(--ti-common-font-weight-4); + --ti-collapse-item-header-font-weight: var(--ti-common-font-weight-4, normal); // 面板头部的聚焦文本色(hide) - --ti-collapse-item-header-focus-text-color: var(--ti-common-color-text-primary); + --ti-collapse-item-header-focus-text-color: var(--ti-common-color-text-primary, #252b3a); // 面板头部箭头尺寸(hide) - --ti-collapse-item-arrow-font-size: var(--ti-common-font-size-base); + --ti-collapse-item-arrow-font-size: var(--ti-common-font-size-base, 12px); // 面板头部箭头右外边距 - --ti-collapse-item-arrow-margin-right: var(--ti-common-space-3x); + --ti-collapse-item-arrow-margin-right: var(--ti-common-space-3x, 12px); // 面板头部向上箭头图标色|箭头悬浮色 - --ti-collapse-item-arrow-hover-text-color: var(--ti-common-color-info); + --ti-collapse-item-arrow-hover-text-color: var(--ti-common-color-info, #252b3a); // 面板头部箭头尺寸 - --ti-collapse-item-icon-font-size: var(--ti-common-font-size-2); + --ti-collapse-item-icon-font-size: var(--ti-common-font-size-2, 16px); // 面板头部箭头旋转角度 --ti-collapse-item-arrow-transform: rotate(90deg); // 面板展开头部箭头旋转角度 @@ -64,19 +64,19 @@ // 面板展开头部箭头图标色 --ti-collapse-item-is-active-arrow-text-color: var(--ti-collapse-item-icon-color); // 面板头部垂直内边距 - --ti-collapse-item-header-padding-vertical: var(--ti-common-space-0); + --ti-collapse-item-header-padding-vertical: var(--ti-common-space-0, 0px); // 面板头部水平内边距 - --ti-collapse-item-header-padding-horizontal: var(--ti-common-space-4x); + --ti-collapse-item-header-padding-horizontal: var(--ti-common-space-4x, 16px); // 面板头部背景色 - --ti-collapse-item-header-bg-color: var(--ti-common-color-bg-white-emphasize); + --ti-collapse-item-header-bg-color: var(--ti-common-color-bg-white-emphasize, #f2f5fc); // 面板头部边框色 - --ti-collapse-item-header-border-color: var(--ti-common-color-transparent); + --ti-collapse-item-header-border-color: var(--ti-common-color-transparent, transparent); // 面板头部左边框色 --ti-collapse-item-header-border-color-left: var(--ti-collapse-item-header-border-color); // 面板头部右边框色 --ti-collapse-item-header-border-color-right: var(--ti-collapse-item-header-border-color); // 面板内容边框色 - --ti-collapse-item-content-border-color: var(--ti-common-color-transparent); + --ti-collapse-item-content-border-color: var(--ti-common-color-transparent, transparent); // 面板内容左边框色 --ti-collapse-item-content-border-color-left: var(--ti-collapse-item-content-border-color); // 面板内容右边框色 @@ -84,13 +84,13 @@ // 面板内容顶部边框色 --ti-collapse-item-content-border-color-top: var(--ti-collapse-item-border-color); // 面板内容顶部内边距 - --ti-collapse-item-content-padding-top: var(--ti-common-space-3x); + --ti-collapse-item-content-padding-top: var(--ti-common-space-3x, 12px); // 面板内容左内边距 - --ti-collapse-item-content-padding-left: var(--ti-common-space-4x); + --ti-collapse-item-content-padding-left: var(--ti-common-space-4x, 16px); // 面板内容右内边距 - --ti-collapse-item-content-padding-right: var(--ti-common-space-4x); + --ti-collapse-item-content-padding-right: var(--ti-common-space-4x, 16px); // 面板内容底部内边距 - --ti-collapse-item-content-padding-bottom: var(--ti-common-space-3x); + --ti-collapse-item-content-padding-bottom: var(--ti-common-space-3x, 12px); // 面板内容字号 - --ti-collapse-item-content-font-size: var(--ti-common-font-size-base); + --ti-collapse-item-content-font-size: var(--ti-common-font-size-base, 12px); } diff --git a/packages/theme/src/color-picker/vars.less b/packages/theme/src/color-picker/vars.less index b809e18b3..63165731e 100644 --- a/packages/theme/src/color-picker/vars.less +++ b/packages/theme/src/color-picker/vars.less @@ -1,33 +1,33 @@ .component-css-vars-colorpicker() { - --ti-color-picker-background: var(--ti-common-color-transparent); - --ti-color-picker-border-color: var(--ti-base-color-common-2); - --ti-color-picker-border-weight: var(--ti-common-border-weight-normal); - --ti-color-picker-border-radius-xs: var(--ti-common-border-radius-normal); - --ti-color-picker-border-radius-sm: var(--ti-common-border-radius-1); - --ti-color-picker-border-radius: var(--ti-common-border-radius-2); - --ti-color-picker-spacing: var(--ti-common-space-base); - --ti-color-picker-spacing-2x: var(--ti-common-space-2x); - --ti-color-picker-shadow: var(--ti-common-shadow-2-down); + --ti-color-picker-background: var(--ti-common-color-transparent, transparent); + --ti-color-picker-border-color: var(--ti-base-color-common-2, #adb0b8); + --ti-color-picker-border-weight: var(--ti-common-border-weight-normal, 1px); + --ti-color-picker-border-radius-xs: var(--ti-common-border-radius-normal, 2px); + --ti-color-picker-border-radius-sm: var(--ti-common-border-radius-1, 4px); + --ti-color-picker-border-radius: var(--ti-common-border-radius-2, 8px); + --ti-color-picker-spacing: var(--ti-common-space-base, 4px); + --ti-color-picker-spacing-2x: var(--ti-common-space-2x, 8px); + --ti-color-picker-shadow: var(--ti-common-shadow-2-down, 0 2px 8px 0 rgba(0, 0, 0, 0.2)); --ti-color-picker__select__wrapper-zindex: 1000; - --ti-color-picker__wrapper-bg: var(--ti-common-color-bg-white-emphasize); + --ti-color-picker__wrapper-bg: var(--ti-common-color-bg-white-emphasize, #f2f5fc); // 超大尺寸高度 - --ti-color-picker-size-large-height: var(--ti-common-size-16x); + --ti-color-picker-size-large-height: var(--ti-common-size-16x, 64px); // 超大尺寸宽度 - --ti-color-picker-size-large-width: var(--ti-common-size-16x); + --ti-color-picker-size-large-width: var(--ti-common-size-16x, 64px); // 中等尺寸高度 - --ti-color-picker-size-medium-height: var(--ti-common-size-12x); + --ti-color-picker-size-medium-height: var(--ti-common-size-12x, 48px); // 中等尺寸最小宽度 - --ti-color-picker-size-medium-width: var(--ti-common-size-12x); + --ti-color-picker-size-medium-width: var(--ti-common-size-12x, 48px); // 小型高度 - --ti-color-picker-size-small-height: var(--ti-common-size-9x); + --ti-color-picker-size-small-height: var(--ti-common-size-9x, 36px); // 小尺寸宽度 - --ti-color-picker-size-small-width: var(--ti-common-size-9x); + --ti-color-picker-size-small-width: var(--ti-common-size-9x, 36px); // 迷你尺寸按钮高度 - --ti-color-picker-size-mini-height: var(--ti-common-size-6x); + --ti-color-picker-size-mini-height: var(--ti-common-size-6x, 24px); // 迷你尺寸宽度 - --ti-color-picker-size-mini-width: var(--ti-common-size-6x); + --ti-color-picker-size-mini-width: var(--ti-common-size-6x, 24px); } \ No newline at end of file diff --git a/packages/theme/src/color-select-panel/vars.less b/packages/theme/src/color-select-panel/vars.less index 47678ee8c..d7e27bc37 100644 --- a/packages/theme/src/color-select-panel/vars.less +++ b/packages/theme/src/color-select-panel/vars.less @@ -1,13 +1,13 @@ .component-css-vars-color-select-panel() { - --ti-color-select-panel-background: var(--ti-common-color-transparent); - --ti-color-select-panel-border-color: var(--ti-base-color-common-2); - --ti-color-select-panel-border-weight: var(--ti-common-border-weight-normal); - --ti-color-select-panel-border-radius-xs: var(--ti-common-border-radius-normal); - --ti-color-select-panel-border-radius-sm: var(--ti-common-border-radius-1); - --ti-color-select-panel-border-radius: var(--ti-common-border-radius-2); - --ti-color-select-panel-spacing: var(--ti-common-space-base); - --ti-color-select-panel-spacing-2x: var(--ti-common-space-2x); - --ti-color-select-panel-shadow: var(--ti-common-shadow-2-down); + --ti-color-select-panel-background: var(--ti-common-color-transparent, transparent); + --ti-color-select-panel-border-color: var(--ti-base-color-common-2, #adb0b8); + --ti-color-select-panel-border-weight: var(--ti-common-border-weight-normal, 1px); + --ti-color-select-panel-border-radius-xs: var(--ti-common-border-radius-normal, 2px); + --ti-color-select-panel-border-radius-sm: var(--ti-common-border-radius-1, 4px); + --ti-color-select-panel-border-radius: var(--ti-common-border-radius-2, 8px); + --ti-color-select-panel-spacing: var(--ti-common-space-base, 4px); + --ti-color-select-panel-spacing-2x: var(--ti-common-space-2x, 8px); + --ti-color-select-panel-shadow: var(--ti-common-shadow-2-down, 0 2px 8px 0 rgba(0, 0, 0, 0.2)); --ti-color-select-panel__wrapper-zindex: 10; - --ti-color-select-panel__wrapper-bg: var(--ti-common-color-bg-white-emphasize); + --ti-color-select-panel__wrapper-bg: var(--ti-common-color-bg-white-emphasize, #f2f5fc); } \ No newline at end of file diff --git a/packages/theme/src/crop/vars.less b/packages/theme/src/crop/vars.less index fd7f8a451..8abb8572f 100644 --- a/packages/theme/src/crop/vars.less +++ b/packages/theme/src/crop/vars.less @@ -12,27 +12,27 @@ .component-css-vars-crop() { // 弹窗裁剪框可滑动区域背景色(hide) - --ti-crop-drag-box-bg-color: var(--ti-common-color-bg-white-normal); + --ti-crop-drag-box-bg-color: var(--ti-common-color-bg-white-normal, #fff); // 弹窗裁剪框可滑动区域背景色 - --ti-crop-modal-bg-color: var(--ti-common-color-dark); + --ti-crop-modal-bg-color: var(--ti-common-color-dark, #000); // 弹窗裁剪框轮廓色(hide) - --ti-crop-view-box-outline-color: var(--ti-common-color-line-active); + --ti-crop-view-box-outline-color: var(--ti-common-color-line-active, #5e7ce0); // 设置裁剪框在图片正中心加号背景色 - --ti-crop-center-bg-color: var(--ti-common-color-icon-graybg-disabled); + --ti-crop-center-bg-color: var(--ti-common-color-icon-graybg-disabled, #dfe1e6); // 弹窗裁剪框蒙层背景色 - --ti-crop-face-bg-color: var(--ti-common-color-light); + --ti-crop-face-bg-color: var(--ti-common-color-light, #fff); // 弹窗裁剪框线条背景色 - --ti-crop-line-bg-color: var(--ti-common-color-bg-emphasize); + --ti-crop-line-bg-color: var(--ti-common-color-bg-emphasize, #5e7ce0); // 弹窗裁剪框六个点背景色 - --ti-crop-point-bg-color: var(--ti-common-color-bg-emphasize); + --ti-crop-point-bg-color: var(--ti-common-color-bg-emphasize, #5e7ce0); // 操作块高度(hide) - --ti-crop-opration-height: var(--ti-common-size-height-normal); + --ti-crop-opration-height: var(--ti-common-size-height-normal, 28px); // 操作块背景色(hide) --ti-crop-opration-bg-color: rgba(55, 55, 55, 0.3); // 操作块文字背景色(hide) --ti-crop-opration-span-bg-color: rgba(0, 0, 0, 0.5); // 操作块文本色(hide) - --ti-crop-opration-span-text-color: var(--ti-common-color-light); + --ti-crop-opration-span-text-color: var(--ti-common-color-light, #fff); // 操作块文字悬浮背景色(hide) --ti-crop-opration-span-hover-bg-color: rgba(0, 0, 0, 0.8); // 模块遮罩背景色(hide) @@ -40,7 +40,7 @@ // 关闭模块背景色(hide) --ti-crop-moda-close-bg-color: rgba(0, 0, 0, 0.5); // 关闭模块图标色(hide) - --ti-crop-moda-close-icon-color: var(--ti-common-color-light); + --ti-crop-moda-close-icon-color: var(--ti-common-color-light, #fff); // 无图片背景色(hide) --ti-crop-nopic-bg-color: rgba(0, 0, 0, 0.3); // 无图片提示色(hide) diff --git a/packages/theme/src/date-panel/vars.less b/packages/theme/src/date-panel/vars.less index 0257b4d4f..992da654e 100644 --- a/packages/theme/src/date-panel/vars.less +++ b/packages/theme/src/date-panel/vars.less @@ -11,20 +11,20 @@ */ .component-css-vars-picker-panel() { - --ti-picker-panel-line-height: var(--ti-common-size-height-normal); - --ti-picker-panel-shortcut-font-size: var(--ti-common-font-size-1); - --ti-picker-panel-icon-color-btn: var(--ti-common-color-icon-normal); - --ti-picker-panel-icon-color-btn-hover: var(--ti-common-color-icon-hover); - --ti-picker-panel-icon-color-btn-disabled: var(--ti-common-color-icon-disabled); + --ti-picker-panel-line-height: var(--ti-common-size-height-normal, 28px); + --ti-picker-panel-shortcut-font-size: var(--ti-common-font-size-1, 14px); + --ti-picker-panel-icon-color-btn: var(--ti-common-color-icon-normal, #575d6c); + --ti-picker-panel-icon-color-btn-hover: var(--ti-common-color-icon-hover, #5e7ce0); + --ti-picker-panel-icon-color-btn-disabled: var(--ti-common-color-icon-disabled, #adb0b8); --ti-picker-panel-box-shadow: 2px 3px 7px rgba(0, 0, 0, 0.15); - --ti-picker-panel-font-size: var(--ti-common-font-size-base); - --ti-picker-panel-text-color: var(--ti-common-color-info-normal); - --ti-picker-panel-bg-color: var(--ti-common-color-light); + --ti-picker-panel-font-size: var(--ti-common-font-size-base, 12px); + --ti-picker-panel-text-color: var(--ti-common-color-info-normal, #252b3a); + --ti-picker-panel-bg-color: var(--ti-common-color-light, #fff); --ti-picker-panel-selected-bg-color: #f2f2f3; - --ti-picker-panel-border-radius: var(--ti-common-border-radius-normal); - --ti-picker-panel-border-color: var(--ti-common-color-line-dividing); - --ti-picker-panel-hover-bg-color: var(--ti-common-color-selected-background); - --ti-picker-panel-disabled-text-color: var(--ti-common-color-text-disabled); - --ti-picker-panel-shortcut-selected-text-color: var(--ti-common-color-selected-text-color); - --ti-picker-panel-shortcut-selected-background: var(--ti-common-color-selected-background); + --ti-picker-panel-border-radius: var(--ti-common-border-radius-normal, 2px); + --ti-picker-panel-border-color: var(--ti-common-color-line-dividing, #dfe1e6); + --ti-picker-panel-hover-bg-color: var(--ti-common-color-selected-background, #5e7ce0); + --ti-picker-panel-disabled-text-color: var(--ti-common-color-text-disabled, #adb0b8); + --ti-picker-panel-shortcut-selected-text-color: var(--ti-common-color-selected-text-color, #fff); + --ti-picker-panel-shortcut-selected-background: var(--ti-common-color-selected-background, #5e7ce0); } diff --git a/packages/theme/src/date-picker/vars.less b/packages/theme/src/date-picker/vars.less index fb44936a4..f6335f4bb 100644 --- a/packages/theme/src/date-picker/vars.less +++ b/packages/theme/src/date-picker/vars.less @@ -12,20 +12,20 @@ .component-css-vars-date-picker() { --ti-date-picker-width: 280px; - --ti-date-picker-font-size: var(--ti-common-font-size-base); - --ti-date-picker-text-color: var(--ti-common-color-info-normal); - --ti-date-picker-bg-color: var(--ti-common-color-light); - --ti-date-picker-border-radius: var(--ti-common-border-radius-normal); - --ti-date-picker-border-color: var(--ti-common-color-line-dividing); - --ti-date-picker-hover-bg-color: var(--ti-base-color-brand-2); - --ti-date-picker-disabled-text-color: var(--ti-common-color-text-disabled); - --ti-date-picker-disabled-bg-color: var(--ti-common-color-bg-disabled); + --ti-date-picker-font-size: var(--ti-common-font-size-base, 12px); + --ti-date-picker-text-color: var(--ti-common-color-info-normal, #252b3a); + --ti-date-picker-bg-color: var(--ti-common-color-light, #fff); + --ti-date-picker-border-radius: var(--ti-common-border-radius-normal, 2px); + --ti-date-picker-border-color: var(--ti-common-color-line-dividing, #dfe1e6); + --ti-date-picker-hover-bg-color: var(--ti-base-color-brand-2, #e9edfa); + --ti-date-picker-disabled-text-color: var(--ti-common-color-text-disabled, #adb0b8); + --ti-date-picker-disabled-bg-color: var(--ti-common-color-bg-disabled, #f5f5f6); --ti-date-picker-selected-bg-color: #f2f2f3; - --ti-date-picker-icon-font-size: var(--ti-common-font-size-1); - --ti-date-picker-current-select-bg-color: var(--ti-base-color-brand-6); - --ti-date-picker-current-border-color: var(--ti-base-color-brand-6); + --ti-date-picker-icon-font-size: var(--ti-common-font-size-1, 14px); + --ti-date-picker-current-select-bg-color: var(--ti-base-color-brand-6, #5e7ce0); + --ti-date-picker-current-border-color: var(--ti-base-color-brand-6, #5e7ce0); --ti-date-picker-current-border-radius: 0; - --ti-date-picker-range-bg-color: var(--ti-base-color-brand-2); - --ti-date-picker-range-hover-bg-color: var(--ti-base-color-brand-2); - --ti-date-picker-header-label-hover-text-color: var(--ti-base-color-brand-7); + --ti-date-picker-range-bg-color: var(--ti-base-color-brand-2, #e9edfa); + --ti-date-picker-range-hover-bg-color: var(--ti-base-color-brand-2, #e9edfa); + --ti-date-picker-header-label-hover-text-color: var(--ti-base-color-brand-7, #526ecc); } diff --git a/packages/theme/src/date-range/vars.less b/packages/theme/src/date-range/vars.less index cec485e21..dac8d8ad7 100644 --- a/packages/theme/src/date-range/vars.less +++ b/packages/theme/src/date-range/vars.less @@ -11,6 +11,6 @@ */ .component-css-vars-date-range-picker() { - --ti-date-range-picker-header-font-size: var(--ti-common-font-size-2); + --ti-date-range-picker-header-font-size: var(--ti-common-font-size-2, 16px); --ti-date-range-picker-time-header-icon-color: #303133; } diff --git a/packages/theme/src/date-table/vars.less b/packages/theme/src/date-table/vars.less index c59b41612..d1077f2f9 100644 --- a/packages/theme/src/date-table/vars.less +++ b/packages/theme/src/date-table/vars.less @@ -17,23 +17,23 @@ --ti-date-table-td-padding-horizontal: 0; --ti-date-table-td-span-width: 36px; --ti-date-table-td-span-height: 24px; - --ti-date-table-th-text-color: var(--ti-base-color-common-2); + --ti-date-table-th-text-color: var(--ti-base-color-common-2, #adb0b8); --ti-date-table-td-border-radius: 0; - --ti-date-table-td-pre-month-text-color: var(--ti-base-color-common-2); - --ti-date-table-td-normal-text-color: var(--ti-common-color-light); + --ti-date-table-td-pre-month-text-color: var(--ti-base-color-common-2, #adb0b8); + --ti-date-table-td-normal-text-color: var(--ti-common-color-light, #fff); --ti-date-table-td-range-bg-color: #f2f6fc; - --ti-date-table-td-today-border-color: var(--ti-base-color-brand-6); - --ti-date-table-td-today-text-color: var(--ti-common-color-info-normal); - --ti-date-table-week-bg-color-current-select: var(--ti-base-color-brand-2); - --ti-date-table-week-bg-color-current-hover: var(--ti-base-color-brand-3); - --ti-date-table-font-size: var(--ti-common-font-size-base); - --ti-date-table-hover-bg-color: var(--ti-common-color-selected-background); - --ti-date-table-current-border-color: var(--ti-base-color-brand-6); - --ti-date-table-disabled-text-color: var(--ti-common-color-text-disabled); - --ti-date-table-disabled-bg-color: var(--ti-common-color-bg-disabled); - --ti-date-table-range-bg-color: var(--ti-base-color-brand-2); - --ti-date-table-range-hover-bg-color: var(--ti-base-color-brand-2); - --ti-date-table-bg-color-current-select: var(--ti-base-color-brand-6); - --ti-date-table-text-color: var(--ti-common-color-info-normal); + --ti-date-table-td-today-border-color: var(--ti-base-color-brand-6, #5e7ce0); + --ti-date-table-td-today-text-color: var(--ti-common-color-info-normal, #252b3a); + --ti-date-table-week-bg-color-current-select: var(--ti-base-color-brand-2, #e9edfa); + --ti-date-table-week-bg-color-current-hover: var(--ti-base-color-brand-3, #beccfa); + --ti-date-table-font-size: var(--ti-common-font-size-base, 12px); + --ti-date-table-hover-bg-color: var(--ti-common-color-selected-background, #5e7ce0); + --ti-date-table-current-border-color: var(--ti-base-color-brand-6, #5e7ce0); + --ti-date-table-disabled-text-color: var(--ti-common-color-text-disabled, #adb0b8); + --ti-date-table-disabled-bg-color: var(--ti-common-color-bg-disabled, #f5f5f6); + --ti-date-table-range-bg-color: var(--ti-base-color-brand-2, #e9edfa); + --ti-date-table-range-hover-bg-color: var(--ti-base-color-brand-2, #e9edfa); + --ti-date-table-bg-color-current-select: var(--ti-base-color-brand-6, #5e7ce0); + --ti-date-table-text-color: var(--ti-common-color-info-normal, #252b3a); --ti-date-table-border-radius-current-select: 0; } diff --git a/packages/theme/src/dept/vars.less b/packages/theme/src/dept/vars.less index 396278b60..9677df60f 100644 --- a/packages/theme/src/dept/vars.less +++ b/packages/theme/src/dept/vars.less @@ -11,10 +11,10 @@ */ .component-css-vars-dept() { - --ti-dept-label-font-size: var(--ti-common-font-size-base); - --ti-dept-label-text-color: var(--ti-common-color-info-normal); - --ti-dept-label-font-weight: var(--ti-common-font-weight-7); - --ti-dept-selected-info-text-color: var(--ti-base-color-brand-6); + --ti-dept-label-font-size: var(--ti-common-font-size-base, 12px); + --ti-dept-label-text-color: var(--ti-common-color-info-normal, #252b3a); + --ti-dept-label-font-weight: var(--ti-common-font-weight-7, bold); + --ti-dept-selected-info-text-color: var(--ti-base-color-brand-6, #5e7ce0); --ti-dept-selected-info-bg-color: #f1f1f1; - --ti-dept-selected-info-border-radius: var(--ti-common-border-radius-normal); + --ti-dept-selected-info-border-radius: var(--ti-common-border-radius-normal, 2px); } diff --git a/packages/theme/src/detail-page/vars.less b/packages/theme/src/detail-page/vars.less index dd491694b..2bfd9c0c3 100644 --- a/packages/theme/src/detail-page/vars.less +++ b/packages/theme/src/detail-page/vars.less @@ -11,15 +11,15 @@ */ .component-css-vars-detail-page() { - --ti-detail-page-text-color: var(--ti-common-color-info-normal); - --ti-detail-page-font-size: var(--ti-common-font-size-base); - --ti-detail-page-header-font-size: var(--ti-common-font-size-1); - --ti-detail-page-header-border-color: var(--ti-common-color-border); - --ti-detail-page-header-seticon-text-color: var(--ti-base-color-brand-6); - --ti-detail-page-header-seticon-hover-text-color: var(--ti-base-color-brand-5); - --ti-detail-page-header-seticon-font-size: var(--ti-common-font-size-2); - --ti-detail-page-content-item-text-color: var(--ti-common-color-placeholder); + --ti-detail-page-text-color: var(--ti-common-color-info-normal, #252b3a); + --ti-detail-page-font-size: var(--ti-common-font-size-base, 12px); + --ti-detail-page-header-font-size: var(--ti-common-font-size-1, 14px); + --ti-detail-page-header-border-color: var(--ti-common-color-border, #adb0b8); + --ti-detail-page-header-seticon-text-color: var(--ti-base-color-brand-6, #5e7ce0); + --ti-detail-page-header-seticon-hover-text-color: var(--ti-base-color-brand-5, #7693f5); + --ti-detail-page-header-seticon-font-size: var(--ti-common-font-size-2, 16px); + --ti-detail-page-content-item-text-color: var(--ti-common-color-placeholder, #adb0b8); --ti-detail-dialog-header-bg-color: #f1f1f1; - --ti-detail-dialog-content-item-hover-bg-color: var(--ti-common-color-hover-background); + --ti-detail-dialog-content-item-hover-bg-color: var(--ti-common-color-hover-background, #f2f5fc); --ti-detail-dialog-active-bg-color: #e9f4fd; } diff --git a/packages/theme/src/dialog-box/vars.less b/packages/theme/src/dialog-box/vars.less index 818e80ae5..9b7fb973a 100644 --- a/packages/theme/src/dialog-box/vars.less +++ b/packages/theme/src/dialog-box/vars.less @@ -12,114 +12,114 @@ .component-css-vars-dialog-box() { // 对话框背景色 - --ti-dialog-box-bg-color: var(--ti-common-color-bg-white-normal); + --ti-dialog-box-bg-color: var(--ti-common-color-bg-white-normal, #fff); // 对话框圆角 - --ti-dialog-box-border-radius: var(--ti-common-border-radius-normal); + --ti-dialog-box-border-radius: var(--ti-common-border-radius-normal, 2px); // 对话框阴影 - --ti-dialog-box-shadow: var(--ti-common-shadow-4-down); + --ti-dialog-box-shadow: var(--ti-common-shadow-4-down, 0 8px 40px 0 rgba(0, 0, 0, 0.2)); // 头部边框色(hide) - --ti-dialog-box-head-border-color: var(--ti-common-color-line-normal); + --ti-dialog-box-head-border-color: var(--ti-common-color-line-normal, #adb0b8); // 头部文本色(hide) - --ti-dialog-box-head-text-color: var(--ti-common-color-text-primary); + --ti-dialog-box-head-text-color: var(--ti-common-color-text-primary, #252b3a); // 头部上内边距 - --ti-dialog-box-head-padding-top: var(--ti-common-space-8x); + --ti-dialog-box-head-padding-top: var(--ti-common-space-8x, 32px); // 头部水平内边距 - --ti-dialog-box-head-padding-horizontal: var(--ti-common-space-8x); + --ti-dialog-box-head-padding-horizontal: var(--ti-common-space-8x, 32px); // 头部下内边距 - --ti-dialog-box-head-padding-bottom: calc(var(--ti-common-space-base) * 7); + --ti-dialog-box-head-padding-bottom: calc(var(--ti-common-space-base, 4px) * 7); // 头部字号 - --ti-dialog-box-head-title-font-size: var(--ti-common-font-size-3); + --ti-dialog-box-head-title-font-size: var(--ti-common-font-size-3, 18px); // 头部字重 - --ti-dialog-box-head-title-font-weight: var(--ti-common-font-weight-7); + --ti-dialog-box-head-title-font-weight: var(--ti-common-font-weight-7, bold); // 头部文本色 - --ti-dialog-box-head-title-text-color: var(--ti-common-color-text-primary); + --ti-dialog-box-head-title-text-color: var(--ti-common-color-text-primary, #252b3a); // 头部底边框颜色 - --ti-dialog-box-head-border-bottom-color: var(--ti-common-color-transparent); + --ti-dialog-box-head-border-bottom-color: var(--ti-common-color-transparent, transparent); // 头部字体图标色(hide) - --ti-dialog-box-head-font-icon-color: var(--ti-common-color-icon-normal); + --ti-dialog-box-head-font-icon-color: var(--ti-common-color-icon-normal, #575d6c); // 头部字体图标悬浮颜色(hide) - --ti-dialog-box-head-font-icon-color-hover: var(--ti-common-color-icon-hover); + --ti-dialog-box-head-font-icon-color-hover: var(--ti-common-color-icon-hover, #5e7ce0); // 头部主体色(hide) - --ti-dialog-box-head-body-text-color: var(--ti-common-color-text-primary); + --ti-dialog-box-head-body-text-color: var(--ti-common-color-text-primary, #252b3a); // 头部主体字号(hide) - --ti-dialog-box-head-body-font-size: var(--ti-common-font-size-1); + --ti-dialog-box-head-body-font-size: var(--ti-common-font-size-1, 14px); // 关闭按钮宽度 - --ti-dialog-box-btn-width: var(--ti-common-size-8x); + --ti-dialog-box-btn-width: var(--ti-common-size-8x, 32px); // 关闭按钮高度 --ti-dialog-box-btn-height: var(--ti-dialog-box-btn-width); // 关闭按钮圆角 - --ti-dialog-box-btn-border-radius: var(--ti-common-border-radius-1); + --ti-dialog-box-btn-border-radius: var(--ti-common-border-radius-1, 4px); // 关闭按钮图标尺寸 - --ti-dialog-box-close-icon-size: var(--ti-common-font-size-1); + --ti-dialog-box-close-icon-size: var(--ti-common-font-size-1, 14px); // 关闭按钮图标色 - --ti-dialog-box-close-icon-color: var(--ti-common-color-icon-normal); + --ti-dialog-box-close-icon-color: var(--ti-common-color-icon-normal, #575d6c); // 关闭按钮悬浮图标色 - --ti-dialog-box-close-icon-color-hover: var(--ti-common-color-icon-hover); + --ti-dialog-box-close-icon-color-hover: var(--ti-common-color-icon-hover, #5e7ce0); // 关闭按钮悬浮背景色 --ti-dialog-box-btn-background-color-hover: none; // 关闭按钮与上边框的距离(hide) - --ti-dialog-box-btn-position-top: var(--ti-common-space-5x); + --ti-dialog-box-btn-position-top: var(--ti-common-space-5x, 20px); // 关闭按钮与右边框的距离(hide) - --ti-dialog-box-btn-position-right: var(--ti-common-space-5x); + --ti-dialog-box-btn-position-right: var(--ti-common-space-5x, 20px); // 内容字号 - --ti-dialog-box-body-font-size: var(--ti-common-font-size-base); + --ti-dialog-box-body-font-size: var(--ti-common-font-size-base, 12px); // 内容字体色 - --ti-dialog-box-body-text-color: var(--ti-common-color-text-primary); + --ti-dialog-box-body-text-color: var(--ti-common-color-text-primary, #252b3a); // 内容垂直内边距 - --ti-dialog-box-body-padding-vertical: var(--ti-common-space-0); + --ti-dialog-box-body-padding-vertical: var(--ti-common-space-0, 0px); // 内容水平内边距 - --ti-dialog-box-body-padding-horizontal: var(--ti-common-space-8x); + --ti-dialog-box-body-padding-horizontal: var(--ti-common-space-8x, 32px); // 底部上内边距 - --ti-dialog-box-footer-padding-top: calc(var(--ti-common-space-base) * 7); + --ti-dialog-box-footer-padding-top: calc(var(--ti-common-space-base, 4px) * 7); // 底部水平内边距 - --ti-dialog-box-footer-padding-horizontal: var(--ti-common-space-8x); + --ti-dialog-box-footer-padding-horizontal: var(--ti-common-space-8x, 32px); // 底部下内边距 - --ti-dialog-box-footer-margin-bottom: var(--ti-common-space-8x); + --ti-dialog-box-footer-margin-bottom: var(--ti-common-space-8x, 32px); // 抽屉最小宽度 - --ti-dialog-box-drawer-min-width: calc(var(--ti-common-space-10) * 50); + --ti-dialog-box-drawer-min-width: calc(var(--ti-common-space-10, 10px) * 50); // 抽屉最大宽度 - --ti-dialog-box-drawer-max-width: calc(var(--ti-common-space-10) * 100); + --ti-dialog-box-drawer-max-width: calc(var(--ti-common-space-10, 10px) * 100); // 抽屉左内边距 - --ti-dialog-box-drawer-padding-left: var(--ti-common-space-8x); + --ti-dialog-box-drawer-padding-left: var(--ti-common-space-8x, 32px); // 抽屉右内边距 - --ti-dialog-box-drawer-padding-right: var(--ti-common-space-10x); + --ti-dialog-box-drawer-padding-right: var(--ti-common-space-10x, 40px); // 抽屉头部上内边距 - --ti-dialog-box-drawer-header-padding-top: var(--ti-common-space-8x); + --ti-dialog-box-drawer-header-padding-top: var(--ti-common-space-8x, 32px); // 抽屉头部下内边距 - --ti-dialog-box-drawer-header-padding-bottom: var(--ti-common-space-5x); + --ti-dialog-box-drawer-header-padding-bottom: var(--ti-common-space-5x, 20px); // 抽屉头部左内边距 - --ti-dialog-box-drawer-header-padding-left: var(--ti-common-space-0); + --ti-dialog-box-drawer-header-padding-left: var(--ti-common-space-0, 0px); // 抽屉头部右内边距 - --ti-dialog-box-drawer-body-padding-right: var(--ti-common-space-0); + --ti-dialog-box-drawer-body-padding-right: var(--ti-common-space-0, 0px); // 抽屉内容上内边距 - --ti-dialog-box-drawer-body-padding-top: var(--ti-common-space-0); + --ti-dialog-box-drawer-body-padding-top: var(--ti-common-space-0, 0px); // 抽屉内容下内边距 - --ti-dialog-box-drawer-body-padding-bottom: var(--ti-common-space-0); + --ti-dialog-box-drawer-body-padding-bottom: var(--ti-common-space-0, 0px); // 抽屉内容左内边距 - --ti-dialog-box-drawer-body-padding-left: var(--ti-common-space-0); + --ti-dialog-box-drawer-body-padding-left: var(--ti-common-space-0, 0px); // 抽屉内容右内边距 - --ti-dialog-box-drawer-header-padding-right: var(--ti-common-space-0); + --ti-dialog-box-drawer-header-padding-right: var(--ti-common-space-0, 0px); // 抽屉底部文本对齐方式 --ti-dialog-box-drawer-footer-text-align: right; // 抽屉底部上内边距 - --ti-dialog-box-drawer-footer-padding-top: var(--ti-common-space-5x); + --ti-dialog-box-drawer-footer-padding-top: var(--ti-common-space-5x, 20px); // 抽屉底部下内边距 - --ti-dialog-box-drawer-footer-padding-bottom: var(--ti-common-space-8x); + --ti-dialog-box-drawer-footer-padding-bottom: var(--ti-common-space-8x, 32px); // 抽屉底部左内边距 - --ti-dialog-box-drawer-footer-padding-left: var(--ti-common-space-0); + --ti-dialog-box-drawer-footer-padding-left: var(--ti-common-space-0, 0px); // 抽屉底部右内边距 - --ti-dialog-box-drawer-footer-padding-right: var(--ti-common-space-0); + --ti-dialog-box-drawer-footer-padding-right: var(--ti-common-space-0, 0px); // 抽屉底部左外边距 - --ti-dialog-box-drawer-footer-margin-left: var(--ti-common-space-8x); + --ti-dialog-box-drawer-footer-margin-left: var(--ti-common-space-8x, 32px); // 抽屉底部右外边距 - --ti-dialog-box-drawer-footer-margin-right: var(--ti-common-space-10x); + --ti-dialog-box-drawer-footer-margin-right: var(--ti-common-space-10x, 40px); // 抽屉头部与底部边框颜色 - --ti-dialog-box-drawer-divider-border-color: var(--ti-common-color-line-dividing); + --ti-dialog-box-drawer-divider-border-color: var(--ti-common-color-line-dividing, #dfe1e6); // 抽屉边框圆角 - --ti-dialog-box-drawer-radius: var(--ti-common-space-0); + --ti-dialog-box-drawer-radius: var(--ti-common-space-0, 0px); } diff --git a/packages/theme/src/dialog-select/vars.less b/packages/theme/src/dialog-select/vars.less index 71019842a..f2bccd412 100644 --- a/packages/theme/src/dialog-select/vars.less +++ b/packages/theme/src/dialog-select/vars.less @@ -12,37 +12,37 @@ .component-css-vars-dialog-select() { // 弹窗主体的顶部外边距 - --ti-dialog-box-body-margin-top: var(--ti-common-space-4x); + --ti-dialog-box-body-margin-top: var(--ti-common-space-4x, 16px); // 弹窗主体的底部外边距 - --ti-dialog-box-body-margin-bottom: var(--ti-common-space-0); + --ti-dialog-box-body-margin-bottom: var(--ti-common-space-0, 0px); // 选择主体的底部外边距 - --ti-dialog-select-body-margin-bottom: var(--ti-common-space-4x); + --ti-dialog-select-body-margin-bottom: var(--ti-common-space-4x, 16px); // 树选择的右侧外边距 - --ti-dialog-select-tree-margin-right: var(--ti-common-space-2x); + --ti-dialog-select-tree-margin-right: var(--ti-common-space-2x, 8px); // 选择主体的边框粗细 - --ti-dialog-select-body-box-border-weight: var(--ti-common-border-weight-normal); + --ti-dialog-select-body-box-border-weight: var(--ti-common-border-weight-normal, 1px); // 选择主体的边框样式 - --ti-dialog-select-body-box-border-style: var(--ti-common-border-style-solid); + --ti-dialog-select-body-box-border-style: var(--ti-common-border-style-solid, solid); // 选择主题的边框颜色 - --ti-dialog-select-body-box-border-color: var(--ti-common-color-line-normal); + --ti-dialog-select-body-box-border-color: var(--ti-common-color-line-normal, #adb0b8); // 选择底部的水平方向内边距 - --ti-dialog-select-footer-padding-horizontal: var(--ti-common-space-6x); + --ti-dialog-select-footer-padding-horizontal: var(--ti-common-space-6x, 24px); // 选择底部的垂直方向的内边距 - --ti-dialog-select-footer-padding-vertical: var(--ti-common-space-0); + --ti-dialog-select-footer-padding-vertical: var(--ti-common-space-0, 0px); // 分页的水平方向内边距 - --ti-dialog-select-pager-padding-horizontal: var(--ti-common-space-0); + --ti-dialog-select-pager-padding-horizontal: var(--ti-common-space-0, 0px); // 分页的垂直方向内边距 - --ti-dialog-select-pager-padding-vertical: var(--ti-common-space-0); + --ti-dialog-select-pager-padding-vertical: var(--ti-common-space-0, 0px); // 分页的上一页按钮的左侧外边距 - --ti-dialog-select-pager-prev-margin-left: var(--ti-common-space-0); + --ti-dialog-select-pager-prev-margin-left: var(--ti-common-space-0, 0px); // 表格主体的底部边框 - --ti-dialog-select-grid-body-border-weight-bottom: var(--ti-common-space-0); + --ti-dialog-select-grid-body-border-weight-bottom: var(--ti-common-space-0, 0px); // 树单选时右侧外边距 - --ti-dialog-select-tree-radio-margin-right: var(--ti-common-space-0); + --ti-dialog-select-tree-radio-margin-right: var(--ti-common-space-0, 0px); // 面板分割线的背景色 --ti-dialog-select-split-bg-color: rgba(22, 30, 38, 0.2); // 面板分割线左侧内边距 - --ti-dialog-select-split-simple-padding-left: var(--ti-common-dropdown-gap); + --ti-dialog-select-split-simple-padding-left: var(--ti-common-dropdown-gap, 2px); // 面板分割线右侧内边距 - --ti-dialog-select-split-simple-padding-right: var(--ti-common-dropdown-gap); + --ti-dialog-select-split-simple-padding-right: var(--ti-common-dropdown-gap, 2px); } \ No newline at end of file diff --git a/packages/theme/src/divider/vars.less b/packages/theme/src/divider/vars.less index d5d0ff46b..5ba3a5708 100644 --- a/packages/theme/src/divider/vars.less +++ b/packages/theme/src/divider/vars.less @@ -1,5 +1,5 @@ .component-css-vars-divider() { - --ti-divider-dividing-line: 1px solid var(--ti-common-color-border); - --ti-divider-text-bg: var(--ti-base-color-bg-1); - --ti-divider-text-color: var(--ti-common-color-text-primary); + --ti-divider-dividing-line: 1px solid var(--ti-common-color-border, #adb0b8); + --ti-divider-text-bg: var(--ti-base-color-bg-1, #ffffff); + --ti-divider-text-color: var(--ti-common-color-text-primary, #252b3a); } diff --git a/packages/theme/src/drawer/vars.less b/packages/theme/src/drawer/vars.less index d12a11488..62f9a7f20 100644 --- a/packages/theme/src/drawer/vars.less +++ b/packages/theme/src/drawer/vars.less @@ -12,71 +12,71 @@ .component-css-vars-drawer() { // 最小宽度 - --ti-drawer-min-width: calc(var(--ti-common-space-10) * 50); + --ti-drawer-min-width: calc(var(--ti-common-space-10, 10px) * 50); // 最大宽度 - --ti-drawer-max-width: calc(var(--ti-common-space-10) * 100); + --ti-drawer-max-width: calc(var(--ti-common-space-10, 10px) * 100); // 背景色 - --ti-drawer-bg-color: var(--ti-common-color-bg-white-normal); + --ti-drawer-bg-color: var(--ti-common-color-bg-white-normal, #fff); // 左内边距 - --ti-drawer-padding-left: var(--ti-common-space-8x); + --ti-drawer-padding-left: var(--ti-common-space-8x, 32px); // 右内边距 - --ti-drawer-padding-right: var(--ti-common-space-10x); + --ti-drawer-padding-right: var(--ti-common-space-10x, 40px); // 阴影 - --ti-drawer-shadow: var(--ti-common-shadow-4-down); + --ti-drawer-shadow: var(--ti-common-shadow-4-down, 0 8px 40px 0 rgba(0, 0, 0, 0.2)); // 头部与底部边框颜色 - --ti-drawer-divider-border-color: var(--ti-common-color-line-dividing); + --ti-drawer-divider-border-color: var(--ti-common-color-line-dividing, #dfe1e6); // 边框圆角 - --ti-drawer-radius: var(--ti-common-space-0); + --ti-drawer-radius: var(--ti-common-space-0, 0px); // 头部上内边距 - --ti-drawer-header-padding-top: var(--ti-common-space-8x); + --ti-drawer-header-padding-top: var(--ti-common-space-8x, 32px); // 头部下内边距 - --ti-drawer-header-padding-bottom: var(--ti-common-space-5x); + --ti-drawer-header-padding-bottom: var(--ti-common-space-5x, 20px); // 头部左内边距 - --ti-drawer-header-padding-left: var(--ti-common-space-0); + --ti-drawer-header-padding-left: var(--ti-common-space-0, 0px); // 头部右内边距 - --ti-drawer-body-padding-right: var(--ti-common-space-0); + --ti-drawer-body-padding-right: var(--ti-common-space-0, 0px); // 头部字号 - --ti-drawer-head-title-font-size: var(--ti-common-font-size-2); + --ti-drawer-head-title-font-size: var(--ti-common-font-size-2, 16px); // 头部文本色(hide) - --ti-drawer-head-text-color: var(--ti-common-color-text-primary); + --ti-drawer-head-text-color: var(--ti-common-color-text-primary, #252b3a); // 头部字重 - --ti-drawer-head-title-font-weight: var(--ti-common-font-weight-7); + --ti-drawer-head-title-font-weight: var(--ti-common-font-weight-7, bold); // 关闭按钮宽度 - --ti-drawer-btn-width: var(--ti-common-size-8x); + --ti-drawer-btn-width: var(--ti-common-size-8x, 32px); // 关闭按钮高度 --ti-drawer-btn-height: var(--ti-drawer-btn-width); // 关闭按钮图标尺寸 - --ti-drawer-close-icon-size: var(--ti-common-font-size-1); + --ti-drawer-close-icon-size: var(--ti-common-font-size-1, 14px); // 关闭按钮圆角 - --ti-drawer-btn-border-radius: var(--ti-common-border-radius-1); + --ti-drawer-btn-border-radius: var(--ti-common-border-radius-1, 4px); // 关闭按钮悬浮图标色 - --ti-drawer-close-icon-color-hover: var(--ti-common-color-icon-hover); + --ti-drawer-close-icon-color-hover: var(--ti-common-color-icon-hover, #5e7ce0); // 关闭按钮与上边框的距离(hide) - --ti-drawer-btn-position-top: var(--ti-common-space-5x); + --ti-drawer-btn-position-top: var(--ti-common-space-5x, 20px); // 关闭按钮与右边框的距离(hide) - --ti-drawer-btn-position-right: var(--ti-common-space-5x); + --ti-drawer-btn-position-right: var(--ti-common-space-5x, 20px); // 内容上内边距 - --ti-drawer-body-padding-top: var(--ti-common-space-0); + --ti-drawer-body-padding-top: var(--ti-common-space-0, 0px); // 内容下内边距 - --ti-drawer-body-padding-bottom: var(--ti-common-space-0); + --ti-drawer-body-padding-bottom: var(--ti-common-space-0, 0px); // 内容左内边距 - --ti-drawer-body-padding-left: var(--ti-common-space-0); + --ti-drawer-body-padding-left: var(--ti-common-space-0, 0px); // 内容右内边距 - --ti-drawer-header-padding-right: var(--ti-common-space-0); + --ti-drawer-header-padding-right: var(--ti-common-space-0, 0px); // 底部文本对齐方式 --ti-drawer-footer-text-align: right; // 底部上内边距 - --ti-drawer-footer-padding-top: var(--ti-common-space-5x); + --ti-drawer-footer-padding-top: var(--ti-common-space-5x, 20px); // 底部下内边距 - --ti-drawer-footer-padding-bottom: var(--ti-common-space-8x); + --ti-drawer-footer-padding-bottom: var(--ti-common-space-8x, 32px); // 底部左内边距 - --ti-drawer-footer-padding-left: var(--ti-common-space-0); + --ti-drawer-footer-padding-left: var(--ti-common-space-0, 0px); // 底部右内边距 - --ti-drawer-footer-padding-right: var(--ti-common-space-0); + --ti-drawer-footer-padding-right: var(--ti-common-space-0, 0px); // 底部左外边距 - --ti-drawer-footer-margin-left: var(--ti-common-space-8x); + --ti-drawer-footer-margin-left: var(--ti-common-space-8x, 32px); // 底部右外边距 - --ti-drawer-footer-margin-right: var(--ti-common-space-10x); + --ti-drawer-footer-margin-right: var(--ti-common-space-10x, 40px); } diff --git a/packages/theme/src/dropdown-item/vars.less b/packages/theme/src/dropdown-item/vars.less index ee2ba9a4e..aabeb0df9 100644 --- a/packages/theme/src/dropdown-item/vars.less +++ b/packages/theme/src/dropdown-item/vars.less @@ -14,103 +14,103 @@ // 下拉菜单项高度 --ti-dropdown-item-height: 30px; // 下拉菜单项悬浮背景色 - --ti-dropdown-item-hover-bg-color: var(--ti-common-color-bg-white-emphasize); + --ti-dropdown-item-hover-bg-color: var(--ti-common-color-bg-white-emphasize, #f2f5fc); // 下拉菜单非禁用项悬浮文本色 - --ti-dropdown-item-hover-text-color: var(--ti-common-color-text-highlight); + --ti-dropdown-item-hover-text-color: var(--ti-common-color-text-highlight, #526ecc); // 下拉菜单项点击瞬间背景色 - --ti-dropdown-item-active-bg-color: var(--ti-common-color-bg-emphasize); + --ti-dropdown-item-active-bg-color: var(--ti-common-color-bg-emphasize, #5e7ce0); // 下拉菜单项点击瞬间文本色 - --ti-dropdown-item-active-text-color: var(--ti-common-color-text-white); + --ti-dropdown-item-active-text-color: var(--ti-common-color-text-white, #fff); // 下拉菜单项禁用文本色 - --ti-dropdown-item-disabled-text-color: var(--ti-common-color-text-disabled); + --ti-dropdown-item-disabled-text-color: var(--ti-common-color-text-disabled, #adb0b8); // 下拉菜单项文本色 - --ti-dropdown-item-text-color: var(--ti-common-color-text-primary); + --ti-dropdown-item-text-color: var(--ti-common-color-text-primary, #252b3a); // 下拉菜单项字号 - --ti-dropdown-item-font-size: var(--ti-common-font-size-base); + --ti-dropdown-item-font-size: var(--ti-common-font-size-base, 12px); // 默认尺寸下拉菜单项的行高 - --ti-dropdown-item-line-height: var(--ti-common-line-height-number); + --ti-dropdown-item-line-height: var(--ti-common-line-height-number, 1.5); // 下拉菜单项垂直内边距 - --ti-dropdown-item-padding-vertical: var(--ti-common-space-6); + --ti-dropdown-item-padding-vertical: var(--ti-common-space-6, 6px); // 下拉菜单项水平内边距 - --ti-dropdown-item-padding-horizontal: var(--ti-common-space-5x); + --ti-dropdown-item-padding-horizontal: var(--ti-common-space-5x, 20px); // 下拉菜单项边框圆角 - --ti-dropdown-item-border-radius: var(--ti-common-border-radius-0); + --ti-dropdown-item-border-radius: var(--ti-common-border-radius-0, 0px); // 下拉菜单项最大宽度 - --ti-dropdown-item-max-width: var(--ti-common-size-33x); + --ti-dropdown-item-max-width: var(--ti-common-size-33x, 132px); // 下拉项图标默认填充色 - --ti-dropdown-item-icon-color: var(--ti-common-color-icon-normal); + --ti-dropdown-item-icon-color: var(--ti-common-color-icon-normal, #575d6c); //下拉项图标悬浮填充色 - --ti-dropdown-item-icon-color-hover: var(--ti-common-color-icon-hover); + --ti-dropdown-item-icon-color-hover: var(--ti-common-color-icon-hover, #5e7ce0); // 下拉项图标激活时填充色 - --ti-dropdown-item-icon-color-active: var(--ti-common-color-icon-white); + --ti-dropdown-item-icon-color-active: var(--ti-common-color-icon-white, #fff); // 下拉项图标禁用填充色 - --ti-dropdown-item-icon-color-disabled: var(--ti-common-color-icon-disabled); + --ti-dropdown-item-icon-color-disabled: var(--ti-common-color-icon-disabled, #adb0b8); // 下拉项展开图标的左侧外边距 --ti-dropdown-item-expand-svg-margin-left: calc( - -1 * (var(--ti-common-space-base) + var(--ti-dropdown-item-expand-icon-size)) + -1 * (var(--ti-common-space-base, 4px) + var(--ti-dropdown-item-expand-icon-size)) ); // 下拉项展开图标的右侧外边距 - --ti-dropdown-item-expand-svg-margin-right: var(--ti-common-space-0); + --ti-dropdown-item-expand-svg-margin-right: var(--ti-common-space-0, 0px); // 下拉项内容的左侧外边距 - --ti-dropdown-item-content-margin-left: var(--ti-common-space-0); + --ti-dropdown-item-content-margin-left: var(--ti-common-space-0, 0px); // 下拉项内容悬浮时的字重 - --ti-dropdown-item-content-font-weight-hover: var(--ti-common-font-weight-4); + --ti-dropdown-item-content-font-weight-hover: var(--ti-common-font-weight-4, normal); // 下拉项分割线尺寸 - --ti-dropdown-item-divided-border-weight: var(--ti-common-border-weight-normal); + --ti-dropdown-item-divided-border-weight: var(--ti-common-border-weight-normal, 1px); // 下拉项分割线样式 - --ti-dropdown-item-divided-border-style: var(--ti-common-border-style-solid); + --ti-dropdown-item-divided-border-style: var(--ti-common-border-style-solid, solid); // 下拉项分割线颜色 - --ti-dropdown-item-divided-border-color: var(--ti-common-color-line-dividing); + --ti-dropdown-item-divided-border-color: var(--ti-common-color-line-dividing, #dfe1e6); // 下拉项前置伪元素的填充色 - --ti-dropdown-item-before-bg-color: var(--ti-common-color-bg-white-normal); + --ti-dropdown-item-before-bg-color: var(--ti-common-color-bg-white-normal, #fff); // 下拉项前置伪元素的垂直外边距 - --ti-dropdown-item-before-margin-vertical: var(--ti-common-space-0); + --ti-dropdown-item-before-margin-vertical: var(--ti-common-space-0, 0px); // 下拉项前置伪元素的水平外边距 - --ti-dropdown-item-before-margin-horizontal: var(--ti-common-space-0); + --ti-dropdown-item-before-margin-horizontal: var(--ti-common-space-0, 0px); // 中尺寸下拉项前置伪元素的水平外边距 - --ti-dropdown-item-medium-before-margin-horizontal: var(--ti-common-space-0); + --ti-dropdown-item-medium-before-margin-horizontal: var(--ti-common-space-0, 0px); // 小尺寸下拉项前置伪元素的水平外边距 - --ti-dropdown-item-small-before-margin-horizontal: var(--ti-common-space-0); + --ti-dropdown-item-small-before-margin-horizontal: var(--ti-common-space-0, 0px); // 迷你尺寸下拉项前置伪元素的水平外边距 - --ti-dropdown-item-mini-before-margin-horizontal: var(--ti-common-space-0); + --ti-dropdown-item-mini-before-margin-horizontal: var(--ti-common-space-0, 0px); // 下拉项前置伪元素的高度 --ti-dropdown-item-before-height: 6px; // TINY-TODO 等设计图出来再优化为变量 // 中尺寸下拉项前置伪元素的高度 --ti-dropdown-item-medium-before-height: 6px; // 小尺寸下拉项前置伪元素的高度 - --ti-dropdown-item-small-before-height: var(--ti-common-size-base); + --ti-dropdown-item-small-before-height: var(--ti-common-size-base, 4px); // 迷你尺寸下拉项前置伪元素的高度 --ti-dropdown-item-mini-before-height: 3px; // 中尺寸下拉菜单菜单项的行高 - --ti-dropdown-item-medium-line-height: var(--ti-common-size-height-normal); + --ti-dropdown-item-medium-line-height: var(--ti-common-size-height-normal, 28px); // 中尺寸下拉菜单菜单项的字号 - --ti-dropdown-item-medium-font-size: var(--ti-common-font-size-1); + --ti-dropdown-item-medium-font-size: var(--ti-common-font-size-1, 14px); // 中尺寸下拉菜单菜单项的垂直内边距 - --ti-dropdown-item-medium-padding-vertical: var(--ti-common-space-0); + --ti-dropdown-item-medium-padding-vertical: var(--ti-common-space-0, 0px); // 中尺寸下拉菜单菜单项的水平内边距 - --ti-dropdown-item-medium-padding-horizontal: var(--ti-common-space-4x); + --ti-dropdown-item-medium-padding-horizontal: var(--ti-common-space-4x, 16px); // 中尺寸下拉菜单菜单项分割线的顶部外边距 - --ti-dropdown-item-medium-divided-margin-top: var(--ti-common-space-6); + --ti-dropdown-item-medium-divided-margin-top: var(--ti-common-space-6, 6px); // 小尺寸下拉菜单菜单项的行高 - --ti-dropdown-item-small-line-height: var(--ti-common-line-height-5); + --ti-dropdown-item-small-line-height: var(--ti-common-line-height-5, 24px); // 小尺寸下拉菜单菜单项的垂直内边距 - --ti-dropdown-item-small-padding-vertical: var(--ti-common-space-0); + --ti-dropdown-item-small-padding-vertical: var(--ti-common-space-0, 0px); // 小尺寸下拉菜单菜单项的水平内边距 - --ti-dropdown-item-small-padding-horizontal: var(--ti-common-space-4x); + --ti-dropdown-item-small-padding-horizontal: var(--ti-common-space-4x, 16px); // 小尺寸下拉菜单菜单项的字号 - --ti-dropdown-item-small-font-size: var(--ti-common-font-size-base); + --ti-dropdown-item-small-font-size: var(--ti-common-font-size-base, 12px); // 小尺寸下拉菜单菜单项分割线的顶部外边距 - --ti-dropdown-item-small-divided-margin-top: var(--ti-common-space-base); + --ti-dropdown-item-small-divided-margin-top: var(--ti-common-space-base, 4px); // 迷你尺寸下拉菜单菜单项的行高 - --ti-dropdown-item-mini-line-height: var(--ti-common-line-height-5); + --ti-dropdown-item-mini-line-height: var(--ti-common-line-height-5, 24px); // 迷你尺寸下拉菜单菜单项的垂直内边距 - --ti-dropdown-item-mini-padding-vertical: var(--ti-common-space-0); + --ti-dropdown-item-mini-padding-vertical: var(--ti-common-space-0, 0px); // 迷你尺寸下拉菜单菜单项的水平内边距 - --ti-dropdown-item-mini-padding-horizontal: var(--ti-common-space-10); + --ti-dropdown-item-mini-padding-horizontal: var(--ti-common-space-10, 10px); // 迷你尺寸下拉菜单菜单项的字号 - --ti-dropdown-item-mini-font-size: var(--ti-common-font-size-base); + --ti-dropdown-item-mini-font-size: var(--ti-common-font-size-base, 12px); // 迷你尺寸下拉菜单菜单项分割线的顶部外边距 - --ti-dropdown-item-mini-divided-margin-top: calc(var(--ti-common-space-1) * 3); + --ti-dropdown-item-mini-divided-margin-top: calc(var(--ti-common-space-1, 1px) * 3); // 展开图标尺寸 --ti-dropdown-item-expand-icon-size: 8px; } diff --git a/packages/theme/src/dropdown-menu/vars.less b/packages/theme/src/dropdown-menu/vars.less index 6d3427bc3..7b8c1ceb8 100644 --- a/packages/theme/src/dropdown-menu/vars.less +++ b/packages/theme/src/dropdown-menu/vars.less @@ -14,29 +14,29 @@ // 下拉菜单边框的宽度 --ti-dropdown-menu-border-width: 0; // 下拉菜单边框的颜色 - --ti-dropdown-menu-border-color: var(--ti-common-color-light); + --ti-dropdown-menu-border-color: var(--ti-common-color-light, #fff); // 下拉菜单弹框的阴影 - --ti-dropdown-menu-box-shadow: var(--ti-common-shadow-2-down); + --ti-dropdown-menu-box-shadow: var(--ti-common-shadow-2-down, 0 2px 8px 0 rgba(0, 0, 0, 0.2)); // 下拉菜单弹框的背景色 - --ti-dropdown-menu-bg-color: var(--ti-common-color-bg-white-normal); + --ti-dropdown-menu-bg-color: var(--ti-common-color-bg-white-normal, #fff); // 下拉菜单弹框的圆角 - --ti-dropdown-menu-border-radius: var(--ti-common-border-radius-normal); + --ti-dropdown-menu-border-radius: var(--ti-common-border-radius-normal, 2px); // 下拉菜单的最小宽度 - --ti-dropdown-menu-min-width: var(--ti-common-size-9x); + --ti-dropdown-menu-min-width: var(--ti-common-size-9x, 36px); // 下拉菜单弹框与触发按钮的距离 - --ti-dropdown-menu-margin-vertical: var(--ti-common-space-base); + --ti-dropdown-menu-margin-vertical: var(--ti-common-space-base, 4px); // 下拉菜单弹框的垂直内边距 - --ti-dropdown-menu-padding-vertical: var(--ti-common-space-base); + --ti-dropdown-menu-padding-vertical: var(--ti-common-space-base, 4px); // 下拉菜单弹框的水平内边距 - --ti-dropdown-menu-padding-horizontal: var(--ti-common-space-0); + --ti-dropdown-menu-padding-horizontal: var(--ti-common-space-0, 0px); // 下拉菜单中尺寸的弹框垂直内边距 - --ti-dropdown-menu-medium-padding-vertical: var(--ti-common-space-6); + --ti-dropdown-menu-medium-padding-vertical: var(--ti-common-space-6, 6px); // 下拉菜单中尺寸的弹框水平内边距 - --ti-dropdown-menu-medium-padding-horizontal: var(--ti-common-space-0); + --ti-dropdown-menu-medium-padding-horizontal: var(--ti-common-space-0, 0px); // 下拉菜单小尺寸的弹框垂直内边距 - --ti-dropdown-menu-small-padding-vertical: var(--ti-common-space-6); + --ti-dropdown-menu-small-padding-vertical: var(--ti-common-space-6, 6px); // 下拉菜单小尺寸的弹框水平内边距 - --ti-dropdown-menu-small-padding-horizontal: var(--ti-common-space-0); + --ti-dropdown-menu-small-padding-horizontal: var(--ti-common-space-0, 0px); // 下拉菜单弹框箭头的尺寸 --ti-dropdown-menu-arrow-border-width: 6px; // 下拉菜单弹框箭头的底部外边距 @@ -44,9 +44,9 @@ // 下拉菜单弹框箭头的顶部外边距 --ti-dropdown-menu-arrow-margin-top: 12px; // 下拉菜单弹框箭头的边框色 - --ti-dropdown-menu-arrow-border-color: var(--ti-common-color-line-normal); + --ti-dropdown-menu-arrow-border-color: var(--ti-common-color-line-normal, #adb0b8); // 下拉菜单弹框箭头的颜色 - --ti-dropdown-menu-arrow-after-border-color: var(--ti-common-color-light); + --ti-dropdown-menu-arrow-after-border-color: var(--ti-common-color-light, #fff); // 下拉菜单弹框周边的填充色 - --ti-dropdown-menu-arrow-after-default-border-color: var(--ti-common-color-transparent); + --ti-dropdown-menu-arrow-after-default-border-color: var(--ti-common-color-transparent, transparent); } \ No newline at end of file diff --git a/packages/theme/src/dropdown/vars.less b/packages/theme/src/dropdown/vars.less index c1f759cad..20bee359e 100644 --- a/packages/theme/src/dropdown/vars.less +++ b/packages/theme/src/dropdown/vars.less @@ -1,56 +1,56 @@ .component-css-vars-dropdown() { // 下拉菜单触发元素的字号 - --ti-dropdown-font-size: var(--ti-common-font-size-base); + --ti-dropdown-font-size: var(--ti-common-font-size-base, 12px); // 下拉菜单触发元素的文字颜色 - --ti-dropdown-text-color: var(--ti-common-color-text-link); + --ti-dropdown-text-color: var(--ti-common-color-text-link, #526ecc); // 下拉菜单触发元素悬浮时的文字颜色 - --ti-dropdown-text-color-hover: var(--ti-common-color-text-link-hover); + --ti-dropdown-text-color-hover: var(--ti-common-color-text-link-hover, #344899); // 下拉菜单触发元素的行高 - --ti-dropdown-line-height: var(--ti-common-line-height-number); + --ti-dropdown-line-height: var(--ti-common-line-height-number, 1.5); // 下拉菜单触发元素的图标尺寸 --ti-dropdown-icon-size: 10px; // 下拉菜单触发元素的图标颜色 - --ti-dropdown-icon-color: var(--ti-common-color-text-link); + --ti-dropdown-icon-color: var(--ti-common-color-text-link, #526ecc); // 下拉菜单触发元素悬浮时的图标颜色 - --ti-dropdown-icon-color-hover: var(--ti-common-color-text-link-hover); + --ti-dropdown-icon-color-hover: var(--ti-common-color-text-link-hover, #344899); // 下拉菜单触发元素按钮类型时图标颜色 - --ti-dropdown-button-icon-color: var(--ti-common-color-icon-white); + --ti-dropdown-button-icon-color: var(--ti-common-color-icon-white, #fff); // 下拉菜单触发元素按钮类型时图标尺寸 - --ti-dropdown-button-icon-size: var(--ti-common-font-size-1); + --ti-dropdown-button-icon-size: var(--ti-common-font-size-1, 14px); // 下拉菜单触发元素的文本禁用色 - --ti-dropdown-text-color-disabled: var(--ti-common-color-text-disabled); + --ti-dropdown-text-color-disabled: var(--ti-common-color-text-disabled, #adb0b8); // 下拉菜单触发源图标的左侧外边距 - --ti-dropdown-trigger-svg-margin-left: var(--ti-common-space-base); + --ti-dropdown-trigger-svg-margin-left: var(--ti-common-space-base, 4px); // 下拉菜触发元素为按钮组时，下拉按钮的左侧内边距 - --ti-dropdown-caret-button-padding-left: var(--ti-common-space-base); + --ti-dropdown-caret-button-padding-left: var(--ti-common-space-base, 4px); // 下拉菜单触发元素为按钮组时，下拉按钮的右侧侧内边距 - --ti-dropdown-caret-button-padding-right: var(--ti-common-space-base); + --ti-dropdown-caret-button-padding-right: var(--ti-common-space-base, 4px); // 下拉菜单触发元素为按钮组时，下拉按钮的最小宽度 - --ti-dropdown-caret-button-min-width: var(--ti-common-size-6x); + --ti-dropdown-caret-button-min-width: var(--ti-common-size-6x, 24px); // 下拉菜单触发元素为按钮组时，按钮之间分割线的颜色 - --ti-dropdown-caret-line-bg-color: var(--ti-common-color-light); + --ti-dropdown-caret-line-bg-color: var(--ti-common-color-light, #fff); // 下拉菜单触发元素为按钮组时，按钮之间分割线的顶部外边距 - --ti-dropdown-caret-line-margin-top: var(--ti-common-space-base); + --ti-dropdown-caret-line-margin-top: var(--ti-common-space-base, 4px); // 下拉菜单触发元素为按钮组时，按钮之间分割线的底部外边距 - --ti-dropdown-caret-line-margin-bottom: var(--ti-common-space-base); + --ti-dropdown-caret-line-margin-bottom: var(--ti-common-space-base, 4px); // 下拉菜单触发元素为按钮组且悬浮时，按钮之间分割线的顶部外边距 - --ti-dropdown-caret-line-margin-top-hover: var(--ti-common-space-0); + --ti-dropdown-caret-line-margin-top-hover: var(--ti-common-space-0, 0px); // 下拉菜单触发元素为按钮组且悬浮时，按钮之间分割线的底部外边距 - --ti-dropdown-caret-line-margin-bottom-hover: var(--ti-common-space-0); + --ti-dropdown-caret-line-margin-bottom-hover: var(--ti-common-space-0, 0px); // 下拉菜单触发元素为按钮组时，按钮之间分割线的宽度 - --ti-dropdown-caret-line-width: var(--ti-common-border-weight-normal); + --ti-dropdown-caret-line-width: var(--ti-common-border-weight-normal, 1px); // 下拉菜单触发元素为按钮组且默认类型时，按钮之间分割线的颜色 - --ti-dropdown-caret-line-bg-color-default: var(--ti-common-color-line-normal); + --ti-dropdown-caret-line-bg-color-default: var(--ti-common-color-line-normal, #adb0b8); // 下拉菜单触发元素为按钮组且默认类型时，按钮之间分割线的悬浮色 - --ti-dropdown-caret-line-bg-color-default-hover: var(--ti-common-color-line-active); + --ti-dropdown-caret-line-bg-color-default-hover: var(--ti-common-color-line-active, #5e7ce0); // 下拉菜单触发元素为按钮组时，图标的垂直外边距 - --ti-dropdown-caret-svg-margin-vertical: var(--ti-common-space-0); + --ti-dropdown-caret-svg-margin-vertical: var(--ti-common-space-0, 0px); // 下拉菜单触发元素为按钮组时，图标的水平外边距 - --ti-dropdown-caret-svg-margin-horizontal: var(--ti-common-space-base); + --ti-dropdown-caret-svg-margin-horizontal: var(--ti-common-space-base, 4px); // 下拉菜单触发元素为按钮组时，图标的左侧内边距 - --ti-dropdown-caret-svg-padding-left: var(--ti-common-space-0); + --ti-dropdown-caret-svg-padding-left: var(--ti-common-space-0, 0px); // 下拉菜单文字按钮的左侧内边距 - --ti-dropdown-title-button-padding-right: var(--ti-common-space-5x); + --ti-dropdown-title-button-padding-right: var(--ti-common-space-5x, 20px); // 下拉菜单文字按钮的右侧内边距 - --ti-dropdown-title-button-padding-left: var(--ti-common-space-5x); + --ti-dropdown-title-button-padding-left: var(--ti-common-space-5x, 20px); } diff --git a/packages/theme/src/error-page/vars.less b/packages/theme/src/error-page/vars.less index 795faf0ab..5c566e206 100644 --- a/packages/theme/src/error-page/vars.less +++ b/packages/theme/src/error-page/vars.less @@ -11,32 +11,32 @@ */ :root { - --ti-errortips-box-bg-color: var(--ti-common-color-light); + --ti-errortips-box-bg-color: var(--ti-common-color-light, #fff); --ti-errortips-body-text-color: #5a5e66; - --ti-errortips-body-font-size: var(--ti-common-font-size-1); + --ti-errortips-body-font-size: var(--ti-common-font-size-1, 14px); --ti-errortips-body-code-font-size: 100px; --ti-errortips-body-code-text-color: #9ac7ef; - --ti-errortips-body-content-font-size: var(--ti-common-font-size-2); - --ti-errortips-body-bottom-font-weight: var(--ti-common-font-weight-8); - --ti-errortips-sso-box-bg-color: var(--ti-common-color-light); + --ti-errortips-body-content-font-size: var(--ti-common-font-size-2, 16px); + --ti-errortips-body-bottom-font-weight: var(--ti-common-font-weight-8, 800); + --ti-errortips-sso-box-bg-color: var(--ti-common-color-light, #fff); --ti-errortips-sso-body-text-color: #5a5e66; - --ti-errortips-sso-body-font-size: var(--ti-common-font-size-1); + --ti-errortips-sso-body-font-size: var(--ti-common-font-size-1, 14px); --ti-errortips-not-sso-bg-color: #dcdfe4; --ti-errortips-not-sso-body-bg-color: #f4f5f9; --ti-errortips-not-sso-body-border-color: #d4d5d7; --ti-errortips-not-sso-body-title-border-color: #b6babf; - --ti-errortips-not-sso-body-title-font-size: var(--ti-common-font-size-4); - --ti-errortips-not-sso-body-login-font-size: var(--ti-common-font-size-2); + --ti-errortips-not-sso-body-title-font-size: var(--ti-common-font-size-4, 20px); + --ti-errortips-not-sso-body-login-font-size: var(--ti-common-font-size-2, 16px); --ti-errortips-not-sso-body-text-color: #5a5e66; - --ti-errortips-not-sso-body-input-border-color: var(--ti-base-color-bg-5); - --ti-errortips-not-sso-body-input-border-radius: var(--ti-common-border-radius-normal); - --ti-errortips-not-sso-body-placeholder-text-color: var(--ti-common-color-placeholder); - --ti-errortips-not-sso-body-input-hover-text-color: var(--ti-common-color-placeholder); - --ti-errortips-not-sso-body-input-focus-text-color: var(--ti-common-color-border); - --ti-errortips-not-sso-body-input-danger-border-color: var(--ti-base-color-bg-8); - --ti-errortips-not-sso-body-button-text-color: var(--ti-common-color-light); - --ti-errortips-not-sso-body-button-bg-color: var(--ti-base-color-brand-6); - --ti-errortips-not-sso-body-button-border-radius: var(--ti-common-border-radius-normal); - --ti-errortips-not-sso-body-button-hover-bg-color: var(--ti-base-color-brand-5); + --ti-errortips-not-sso-body-input-border-color: var(--ti-base-color-bg-5, #f5f5f6); + --ti-errortips-not-sso-body-input-border-radius: var(--ti-common-border-radius-normal, 2px); + --ti-errortips-not-sso-body-placeholder-text-color: var(--ti-common-color-placeholder, #adb0b8); + --ti-errortips-not-sso-body-input-hover-text-color: var(--ti-common-color-placeholder, #adb0b8); + --ti-errortips-not-sso-body-input-focus-text-color: var(--ti-common-color-border, #adb0b8); + --ti-errortips-not-sso-body-input-danger-border-color: var(--ti-base-color-bg-8, #c7000b); + --ti-errortips-not-sso-body-button-text-color: var(--ti-common-color-light, #fff); + --ti-errortips-not-sso-body-button-bg-color: var(--ti-base-color-brand-6, #5e7ce0); + --ti-errortips-not-sso-body-button-border-radius: var(--ti-common-border-radius-normal, 2px); + --ti-errortips-not-sso-body-button-hover-bg-color: var(--ti-base-color-brand-5, #7693f5); --ti-errortips-not-sso-body-errmessage-text-color: #f00; } diff --git a/packages/theme/src/espace/vars.less b/packages/theme/src/espace/vars.less index 2597469b8..b6576636e 100644 --- a/packages/theme/src/espace/vars.less +++ b/packages/theme/src/espace/vars.less @@ -12,6 +12,6 @@ .component-css-vars-espace() { --ti-espace-font-size: 26px; - --ti-espace-text-color: var(--ti-base-color-brand-6); - --ti-espace-hover-text-color: var(--ti-base-color-brand-5); + --ti-espace-text-color: var(--ti-base-color-brand-6, #5e7ce0); + --ti-espace-hover-text-color: var(--ti-base-color-brand-5, #7693f5); } diff --git a/packages/theme/src/fall-menu/vars.less b/packages/theme/src/fall-menu/vars.less index d397cfc65..0e4872792 100644 --- a/packages/theme/src/fall-menu/vars.less +++ b/packages/theme/src/fall-menu/vars.less @@ -12,29 +12,29 @@ .component-css-vars-fall-menu() { // 菜单列表高度 - --ti-fall-menu-menu-height: var(--ti-common-size-height-large); + --ti-fall-menu-menu-height: var(--ti-common-size-height-large, 48px); // 菜单背景色 - --ti-fall-menu-bg-color-normal: var(--ti-base-color-brand-6); + --ti-fall-menu-bg-color-normal: var(--ti-base-color-brand-6, #5e7ce0); // 菜单项悬浮背景色 - --ti-fall-menu-bg-color-hover: var(--ti-base-color-brand-5); + --ti-fall-menu-bg-color-hover: var(--ti-base-color-brand-5, #7693f5); // 左右图标大小 - --ti-fall-menu-icon-font-size: var(--ti-common-font-size-base); + --ti-fall-menu-icon-font-size: var(--ti-common-font-size-base, 12px); // 菜单项文本色 - --ti-fall-menu-slot-text-color: var(--ti-common-color-light); + --ti-fall-menu-slot-text-color: var(--ti-common-color-light, #fff); // 悬浮下拉框背景色 - --ti-fall-menu-slot-bg-color: var(--ti-common-color-light); + --ti-fall-menu-slot-bg-color: var(--ti-common-color-light, #fff); // 菜单项字号 - --ti-fall-menu-title-font-size: var(--ti-common-font-size-2); + --ti-fall-menu-title-font-size: var(--ti-common-font-size-2, 16px); // 下拉框标题文本色 - --ti-fall-menu-box-title-text-color: var(--ti-common-color-placeholder); + --ti-fall-menu-box-title-text-color: var(--ti-common-color-placeholder, #adb0b8); // 下拉框文本色 - --ti-fall-menu-box-text-color: var(--ti-base-color-brand-6); + --ti-fall-menu-box-text-color: var(--ti-base-color-brand-6, #5e7ce0); // 下拉框标题字号 - --ti-fall-menu-box-font-size: var(--ti-common-font-size-1); + --ti-fall-menu-box-font-size: var(--ti-common-font-size-1, 14px); // 下拉框标题高度 - --ti-fall-menu-box-title-height: var(--ti-common-size-height-small); + --ti-fall-menu-box-title-height: var(--ti-common-size-height-small, 32px); // 下拉框内容高度 --ti-fall-menu-box-content-height: 26px; // 下拉框悬浮文本色 - --ti-fall-menu-box-hover-text-color: var(--ti-common-color-primary-active); + --ti-fall-menu-box-hover-text-color: var(--ti-common-color-primary-active, #7693f5); } diff --git a/packages/theme/src/floatbar/vars.less b/packages/theme/src/floatbar/vars.less index d18b781d7..0c3bd70a0 100644 --- a/packages/theme/src/floatbar/vars.less +++ b/packages/theme/src/floatbar/vars.less @@ -12,26 +12,26 @@ .component-css-vars-floatbar() { // 浮动块边框色 - --ti-floatbar-border-color: var(--ti-common-color-border); + --ti-floatbar-border-color: var(--ti-common-color-border, #adb0b8); // 浮动块圆角 - --ti-floatbar-border-radius: var(--ti-common-border-radius-normal); + --ti-floatbar-border-radius: var(--ti-common-border-radius-normal, 2px); // 浮动块字号 - --ti-floatbar-font-size: var(--ti-common-font-size-1); + --ti-floatbar-font-size: var(--ti-common-font-size-1, 14px); // 浮动块背景色 - --ti-floatbar-list-bg-color: var(--ti-common-color-bg-white-normal); + --ti-floatbar-list-bg-color: var(--ti-common-color-bg-white-normal, #fff); // 浮动块阴影: --ti-floatbar-box-shadow: 2px 3px 7px rgba(0, 0, 0, 0.15); // 列表项最小高度 - --ti-floatbar-list-item-min-height: var(--ti-common-size-10x); + --ti-floatbar-list-item-min-height: var(--ti-common-size-10x, 40px); // 列表项最小宽度 - --ti-floatbar-list-item-min-width: var(--ti-common-size-20x); + --ti-floatbar-list-item-min-width: var(--ti-common-size-20x, 80px); // 列表项行高 - --ti-floatbar-list-line-height: var(--ti-common-size-10x); + --ti-floatbar-list-line-height: var(--ti-common-size-10x, 40px); // 列表项文本色 - --ti-floatbar-list-text-color: var(--ti-common-color-info-normal); + --ti-floatbar-list-text-color: var(--ti-common-color-info-normal, #252b3a); // 列表项悬浮文本色 - --ti-floatbar-list-hover-text-color: var(--ti-common-color-primary-normal); + --ti-floatbar-list-hover-text-color: var(--ti-common-color-primary-normal, #5e7ce0); // 列表项悬浮背景色 --ti-floatbar-list-hover-bg-color: rgba(24, 144, 255, 0.06); } diff --git a/packages/theme/src/form-item/vars.less b/packages/theme/src/form-item/vars.less index 5dfe10ad8..13828574f 100644 --- a/packages/theme/src/form-item/vars.less +++ b/packages/theme/src/form-item/vars.less @@ -12,47 +12,47 @@ .component-css-vars-form-item() { // 小型尺寸表单输入框左侧行高(hide) - --ti-form-item-small-line-height: var(--ti-common-line-height-7); + --ti-form-item-small-line-height: var(--ti-common-line-height-7, 36px); // 中等尺寸表单输入框左侧行高(hide) - --ti-form-item-medium-line-height: calc(var(--ti-common-line-height-7) + 6px); + --ti-form-item-medium-line-height: calc(var(--ti-common-line-height-7, 36px) + 6px); // 迷你尺寸表单输入框左侧行高(hide) - --ti-form-item-mini-line-height: var(--ti-common-line-height-5); + --ti-form-item-mini-line-height: var(--ti-common-line-height-5, 24px); // 表单输入框左侧文本行高 - --ti-form-item-label-line-height: var(--ti-common-size-height-normal); + --ti-form-item-label-line-height: var(--ti-common-size-height-normal, 28px); // 迷你尺寸表单的输入框高度 - --ti-form-item-input-mini-height: var(--ti-common-size-6x); + --ti-form-item-input-mini-height: var(--ti-common-size-6x, 24px); // 小型尺寸表单的输入框高度 - --ti-form-item-input-small-height: var(--ti-common-size-9x); + --ti-form-item-input-small-height: var(--ti-common-size-9x, 36px); // 中等尺寸表单的输入框高度 - --ti-form-item-input-medium-height: calc(var(--ti-common-size-base) * 10.5); + --ti-form-item-input-medium-height: calc(var(--ti-common-size-base, 4px) * 10.5); // 表单输入框左侧字号 - --ti-form-item-label-font-size: var(--ti-common-font-size-1); + --ti-form-item-label-font-size: var(--ti-common-font-size-1, 14px); // 表单输入框左侧文本色 - --ti-form-item-label-text-color: var(--ti-common-color-info-normal); + --ti-form-item-label-text-color: var(--ti-common-color-info-normal, #252b3a); // 表单校验错误时输入框提示字号 - --ti-form-item-error-font-size: var(--ti-common-font-size-base); + --ti-form-item-error-font-size: var(--ti-common-font-size-base, 12px); // 表单校验错误时输入框提示文本色 - --ti-form-item-error-text-color: var(--ti-common-color-error); + --ti-form-item-error-text-color: var(--ti-common-color-error, #f66f6a); // 表单校验错误时星号文本色 - --ti-form-item-error-star-text-color: var(--ti-common-color-error); + --ti-form-item-error-star-text-color: var(--ti-common-color-error, #f66f6a); // 表单校验错误时输入框边框色 - --ti-form-item-error-border-color: var(--ti-common-color-error-border); + --ti-form-item-error-border-color: var(--ti-common-color-error-border, #f66f6a); // 表单校验错误时输入框背景色 - --ti-form-item-error-bg-color: var(--ti-common-color-error-bg); + --ti-form-item-error-bg-color: var(--ti-common-color-error-bg, #ffeeed); // 小型尺寸表单的行间距 - --ti-form-item-margin-bottom-default: var(--ti-common-space-5x); + --ti-form-item-margin-bottom-default: var(--ti-common-space-5x, 20px); // 迷你尺寸表单的行间距 - --ti-form-item-margin-bottom-mini: var(--ti-common-space-2x); + --ti-form-item-margin-bottom-mini: var(--ti-common-space-2x, 8px); // 小型尺寸表单的行间距 - --ti-form-item-margin-bottom-small: var(--ti-common-space-2x); + --ti-form-item-margin-bottom-small: var(--ti-common-space-2x, 8px); // 中等尺寸表单的行间距 - --ti-form-item-margin-bottom-medium: var(--ti-common-space-3x); + --ti-form-item-margin-bottom-medium: var(--ti-common-space-3x, 12px); // 表单校验错误时星号的显示(hide) --ti-form-item-error-star-display: inline-block; // 表单校验行内错误左侧外边距 - --ti-form-item-error-inline-margin-left: calc(var(--ti-common-space-base) * 2.5); + --ti-form-item-error-inline-margin-left: calc(var(--ti-common-space-base, 4px) * 2.5); // 表单校验块级错误消息上侧内边距 - --ti-form-item-error-block-padding-top: var(--ti-common-space-2x); + --ti-form-item-error-block-padding-top: var(--ti-common-space-2x, 8px); } diff --git a/packages/theme/src/form/vars.less b/packages/theme/src/form/vars.less index 3bff969e3..0d5ce0741 100644 --- a/packages/theme/src/form/vars.less +++ b/packages/theme/src/form/vars.less @@ -17,7 +17,7 @@ // 表单项垂直排列时的下边距(hide) --ti-form-item-label-top-margin-bottom: 16px; // 表单项垂直排列时的表单项标签行高(hide) - --ti-form-item-label-top-label-line-height: var(--ti-common-size-height-normal); + --ti-form-item-label-top-label-line-height: var(--ti-common-size-height-normal, 28px); // 表单项垂直排列时的表单项标签高度(hide) - --ti-form-item-label-top-label-height: var(--ti-common-size-height-normal); + --ti-form-item-label-top-label-height: var(--ti-common-size-height-normal, 28px); } diff --git a/packages/theme/src/grid/vars.less b/packages/theme/src/grid/vars.less index 9acc56063..9b9e7b58e 100644 --- a/packages/theme/src/grid/vars.less +++ b/packages/theme/src/grid/vars.less @@ -12,142 +12,142 @@ .component-css-vars-grid() { // 表格默认字体 - --ti-grid-font-family: var(--ti-common-font-family); + --ti-grid-font-family: var(--ti-common-font-family, 'Helvetica', 'Arial', 'PingFangSC-Regular', 'Hiragino Sans GB', 'Microsoft YaHei', '微软雅黑', 'Microsoft JhengHei'); // 默认表头文本色 - --ti-grid-header-text-color: var(--ti-common-color-info-normal); + --ti-grid-header-text-color: var(--ti-common-color-info-normal, #252b3a); // 默认表体文本色 - --ti-grid-text-color: var(--ti-common-color-info-normal); + --ti-grid-text-color: var(--ti-common-color-info-normal, #252b3a); // 默认按钮图标悬浮色 - --ti-grid-icon-color: var(--ti-common-color-info-normal); + --ti-grid-icon-color: var(--ti-common-color-info-normal, #252b3a); // 表格亮色 - --ti-grid-light-color: var(--ti-common-color-light); + --ti-grid-light-color: var(--ti-common-color-light, #fff); // 表格错误色 - --ti-grid-error-color: var(--ti-common-color-error-text); + --ti-grid-error-color: var(--ti-common-color-error-text, #de504e); // 表格错误背景色 - --ti-grid-error-bg-color: var(--ti-common-color-error-bg); + --ti-grid-error-bg-color: var(--ti-common-color-error-bg, #ffeeed); // 表格成功色 - --ti-grid-success-color: var(--ti-common-color-success); + --ti-grid-success-color: var(--ti-common-color-success, #50d4ab); // 表格警告色 - --ti-grid-warning-color: var(--ti-common-color-warn); + --ti-grid-warning-color: var(--ti-common-color-warn, #fa9841); // 表格禁用色 - --ti-grid-disabled-color: var(--ti-common-color-bg-disabled); + --ti-grid-disabled-color: var(--ti-common-color-bg-disabled, #f5f5f6); // 筛选弹框复选框边框色 - --ti-grid-normal-text-color: var(--ti-common-color-placeholder); + --ti-grid-normal-text-color: var(--ti-common-color-placeholder, #adb0b8); // 默认字号 - --ti-grid-font-size: var(--ti-common-font-size-base); + --ti-grid-font-size: var(--ti-common-font-size-base, 12px); // 默认边框色 - --ti-grid-border-color: var(--ti-common-color-line-dividing); + --ti-grid-border-color: var(--ti-common-color-line-dividing, #dfe1e6); // 行复选按钮圆角|筛选弹窗输入框圆角 - --ti-grid-border-radius: var(--ti-common-border-radius-normal); + --ti-grid-border-radius: var(--ti-common-border-radius-normal, 2px); // 表格主体内容td边框颜色 - --ti-grid-body-td-border-color: var(--ti-common-color-line-dividing); + --ti-grid-body-td-border-color: var(--ti-common-color-line-dividing, #dfe1e6); // 表头x轴虚拟滚动元素边框颜色 - --ti-grid-header-repair-border-color: var(--ti-common-color-transparent); + --ti-grid-header-repair-border-color: var(--ti-common-color-transparent, transparent); // 表格内部单选按钮边框色 - --ti-grid-radio-border-color: var(--ti-common-color-line-normal); + --ti-grid-radio-border-color: var(--ti-common-color-line-normal, #adb0b8); // 表格单选框选中背景色 --ti-grid-radio-bg-color-checked: var(--ti-grid-primary-color); // 表格内部多选按钮边框色 - --ti-grid-checkbox-border-color: var(--ti-common-color-line-normal); + --ti-grid-checkbox-border-color: var(--ti-common-color-line-normal, #adb0b8); // 表格多选框选中背景色 --ti-grid-checkbox-bg-color-checked: var(--ti-grid-primary-color); // 表格复选框字号 - --ti-grid-checkbox-icon-size: var(--ti-common-font-size-1); + --ti-grid-checkbox-icon-size: var(--ti-common-font-size-1, 14px); // 表格内部多选按钮边框圆角 - --ti-grid-checkbox-border-radius: var(--ti-common-border-radius-normal); + --ti-grid-checkbox-border-radius: var(--ti-common-border-radius-normal, 2px); // 表格头部默认背景色 - --ti-grid-header-background-color: var(--ti-common-color-bg-white-emphasize); + --ti-grid-header-background-color: var(--ti-common-color-bg-white-emphasize, #f2f5fc); // 新增行背景颜色 - --ti-grid-new-row-background-color: var(--ti-common-color-bg-white-emphasize); + --ti-grid-new-row-background-color: var(--ti-common-color-bg-white-emphasize, #f2f5fc); // 表格主色调色 - --ti-grid-primary-color: var(--ti-common-color-primary-normal); + --ti-grid-primary-color: var(--ti-common-color-primary-normal, #5e7ce0); // 表格主色调悬浮色 - --ti-grid-primary-hover-color: var(--ti-common-color-primary-hover); + --ti-grid-primary-hover-color: var(--ti-common-color-primary-hover, #7693f5); // 表格主色调激活色 - --ti-grid-primary-active-color: var(--ti-common-color-primary-active); + --ti-grid-primary-active-color: var(--ti-common-color-primary-active, #7693f5); // 表格主色调禁用色(没有效果) - --ti-grid-primary-disabled-text-color: var(--ti-common-color-text-disabled); + --ti-grid-primary-disabled-text-color: var(--ti-common-color-text-disabled, #adb0b8); // 自定义表头列高度（没有效果） - --ti-grid-custom-head-height: var(--ti-common-space-10x); + --ti-grid-custom-head-height: var(--ti-common-space-10x, 40px); // 自定义内容列表高度（没有效果） - --ti-grid-custom-body-list-height: var(--ti-common-size-height-small); + --ti-grid-custom-body-list-height: var(--ti-common-size-height-small, 32px); // 表格列拖拽分割线背景颜色 - --ti-grid-header-resizable-bg-color: var(--ti-common-color-text-white); + --ti-grid-header-resizable-bg-color: var(--ti-common-color-text-white, #fff); // 表格列拖拽分割线高度 --ti-grid-header-resizable-line-height: 100%; // (单选|复选)框禁用背景色 - --ti-grid-input-disabled-bg-color: var(--ti-common-color-bg-disabled); + --ti-grid-input-disabled-bg-color: var(--ti-common-color-bg-disabled, #f5f5f6); // 筛选弹框边框色 - --ti-grid-popup-border-color: var(--ti-common-color-line-dividing); + --ti-grid-popup-border-color: var(--ti-common-color-line-dividing, #dfe1e6); // 简易筛选面板按钮组边距 - --ti-grid-filter-button-group-size: var(--ti-common-space-10); + --ti-grid-filter-button-group-size: var(--ti-common-space-10, 10px); // 简易时间筛选面板标题颜色 - --ti-grid-filter-date-title-color: var(--ti-common-color-text-weaken); + --ti-grid-filter-date-title-color: var(--ti-common-color-text-weaken, #8a8e99); // 筛选面板字体颜色 - --ti-grid-filter-date-color: var(--ti-common-color-text-primary); + --ti-grid-filter-date-color: var(--ti-common-color-text-primary, #252b3a); // 树表展开图标颜色 - --ti-grid-tree-icon-color: var(--ti-common-color-icon-normal); + --ti-grid-tree-icon-color: var(--ti-common-color-icon-normal, #575d6c); // 树表展开图标悬浮颜色 - --ti-grid-tree-icon-hover-color: var(--ti-common-color-icon-hover); + --ti-grid-tree-icon-hover-color: var(--ti-common-color-icon-hover, #5e7ce0); // 行默认背景色 - --ti-grid-row-background-color: var(--ti-common-color-bg-white-normal); + --ti-grid-row-background-color: var(--ti-common-color-bg-white-normal, #fff); // 斑马纹行背景色 --ti-grid-row-striped-background-color: #fafafa; // 行悬浮默认背景色 - --ti-grid-row-hover-background-color: var(--ti-common-color-hover-background); + --ti-grid-row-hover-background-color: var(--ti-common-color-hover-background, #f2f5fc); // 高亮悬停列悬浮表头背景色 --ti-grid-column-hover-background-color: #d7effb; // 鼠标配置项双击表头选中当前列背景色 - --ti-grid-column-current-background-color: var(--ti-common-color-hover-background); + --ti-grid-column-current-background-color: var(--ti-common-color-hover-background, #f2f5fc); // 表头编辑图标色 - --ti-grid-column-icon-text-color: var(--ti-common-color-icon-normal); + --ti-grid-column-icon-text-color: var(--ti-common-color-icon-normal, #575d6c); // 可编辑表格输入框高度 - --ti-grid-input-height: var(--ti-common-size-height-normal); + --ti-grid-input-height: var(--ti-common-size-height-normal, 28px); // 鼠标配置项选中项边框厚度 - --ti-grid-column-checked-border-width: var(--ti-common-border-weight-1); + --ti-grid-column-checked-border-width: var(--ti-common-border-weight-1, 2px); // 表格加载中背景色 --ti-grid-loading-background-color: rgba(0, 0, 0, 0.2); // 表格加载中图标长度尺寸 - --ti-grid-loading-width-size: var(--ti-common-size-10x); + --ti-grid-loading-width-size: var(--ti-common-size-10x, 40px); // 表格加载中图标宽度尺寸 - --ti-grid-loading-height-size: var(--ti-common-size-10x); + --ti-grid-loading-height-size: var(--ti-common-size-10x, 40px); // 单元格字体高度 - --ti-grid-line-height-number: var(--ti-common-line-height-number); + --ti-grid-line-height-number: var(--ti-common-line-height-number, 1.5); // 中等尺寸表头高度 - --ti-grid-medium-header-column-height: var(--ti-common-size-height-normal); + --ti-grid-medium-header-column-height: var(--ti-common-size-height-normal, 28px); // 默认尺寸表头高度 - --ti-grid-default-header-column-height: var(--ti-common-size-height-normal); + --ti-grid-default-header-column-height: var(--ti-common-size-height-normal, 28px); // 小尺寸表头高度 - --ti-grid-small-header-column-height: var(--ti-common-size-height-normal); + --ti-grid-small-header-column-height: var(--ti-common-size-height-normal, 28px); // 超小尺寸表头高度 - --ti-grid-mini-header-column-height: var(--ti-common-size-height-normal); + --ti-grid-mini-header-column-height: var(--ti-common-size-height-normal, 28px); // 中等尺寸表格单元格高度 - --ti-grid-medium-column-height: var(--ti-common-size-13x); + --ti-grid-medium-column-height: var(--ti-common-size-13x, 52px); // 默认尺寸表格单元格高度 - --ti-grid-default-column-height: calc(var(--ti-common-space-10x) + 2px); + --ti-grid-default-column-height: calc(var(--ti-common-space-10x, 40px) + 2px); // 小尺寸表格单元格高度 - --ti-grid-small-column-height: var(--ti-common-size-9x); + --ti-grid-small-column-height: var(--ti-common-size-9x, 36px); // 超小尺寸表格单元格高度 - --ti-grid-mini-column-height: var(--ti-common-size-7x); + --ti-grid-mini-column-height: var(--ti-common-size-7x, 28px); // 默认单元格垂直内边距 - --ti-grid-td-padding-vertical: calc(var(--ti-common-space-1) * 2); + --ti-grid-td-padding-vertical: calc(var(--ti-common-space-1, 1px) * 2); // 单元格水平内边距 - --ti-grid-td-padding-horizontal: var(--ti-common-space-2x); + --ti-grid-td-padding-horizontal: var(--ti-common-space-2x, 8px); // 表头排序图标尺寸 - --ti-grid-header-icon-font-size: var(--ti-common-font-size-2); + --ti-grid-header-icon-font-size: var(--ti-common-font-size-2, 16px); // 表头排序图标尺寸缩放比例 --ti-grid-column-icon-scale-size: 1; // 表格无数据背景图片 diff --git a/packages/theme/src/guide/vars.less b/packages/theme/src/guide/vars.less index 30e64a049..d73f9610d 100644 --- a/packages/theme/src/guide/vars.less +++ b/packages/theme/src/guide/vars.less @@ -1,110 +1,110 @@ .component-css-vars-guide() { // 引导框箭头高度 - --ti-guide-arrow-height: var(--ti-common-size-4x); + --ti-guide-arrow-height: var(--ti-common-size-4x, 16px); // 引导框箭头宽度 - --ti-guide-arrow-width: var(--ti-common-size-4x); + --ti-guide-arrow-width: var(--ti-common-size-4x, 16px); // 引导框头部左上边框圆角 - --ti-guide-header-border-top-left-radius: var(--ti-common-border-radius-1); + --ti-guide-header-border-top-left-radius: var(--ti-common-border-radius-1, 4px); // 引导框头部右上边框圆角 - --ti-guide-header-border-top-right-radius: var(--ti-common-border-radius-1); + --ti-guide-header-border-top-right-radius: var(--ti-common-border-radius-1, 4px); // 引导框头部行高 - --ti-guide-header-line-height: var(--ti-common-line-height-6); + --ti-guide-header-line-height: var(--ti-common-line-height-6, 32px); // 引导框头部左内边距 - --ti-guide-header-padding-left: var(--ti-common-space-6x); + --ti-guide-header-padding-left: var(--ti-common-space-6x, 24px); // 引导框头部右内边距 - --ti-guide-header-padding-right: var(--ti-common-space-6x); + --ti-guide-header-padding-right: var(--ti-common-space-6x, 24px); // 引导框头部顶部内边距 - --ti-guide-header-padding-top: var(--ti-common-space-6x); + --ti-guide-header-padding-top: var(--ti-common-space-6x, 24px); // 引导框头部背景色 - --ti-guide-header-bg-color: var(--ti-common-color-bg-white-normal); + --ti-guide-header-bg-color: var(--ti-common-color-bg-white-normal, #fff); // 引导框标题文本色 - --ti-guide-title-text-color: var(--ti-common-color-text-primary); + --ti-guide-title-text-color: var(--ti-common-color-text-primary, #252b3a); // 引导框标题行高 - --ti-guide-title-line-height: var(--ti-common-line-height-6); + --ti-guide-title-line-height: var(--ti-common-line-height-6, 32px); // 引导框标题字重 - --ti-guide-title-font-weight: var(--ti-common-font-weight-7); + --ti-guide-title-font-weight: var(--ti-common-font-weight-7, bold); // 引导框关闭按钮图标字号 - --ti-guide-cancel-icon-font-size: var(--ti-common-font-size-5); + --ti-guide-cancel-icon-font-size: var(--ti-common-font-size-5, 24px); // 引导框关闭按钮图标宽度 - --ti-guide-cancel-icon-width: var(--ti-common-size-5x); + --ti-guide-cancel-icon-width: var(--ti-common-size-5x, 20px); // 引导框关闭按钮图标高度 - --ti-guide-cancel-icon-height: var(--ti-common-size-5x); + --ti-guide-cancel-icon-height: var(--ti-common-size-5x, 20px); // 引导框关闭按钮图标行高 - --ti-guide-cancel-icon-line-height: var(--ti-common-line-height-4); + --ti-guide-cancel-icon-line-height: var(--ti-common-line-height-4, 20px); // 引导框关闭按钮图标颜色 - --ti-guide-cancel-icon-color: var(--ti-common-color-icon-normal); + --ti-guide-cancel-icon-color: var(--ti-common-color-icon-normal, #575d6c); // 引导框关闭按钮图标字重 - --ti-guide-cancel-icon-font-weight: var(--ti-common-font-weight-1); + --ti-guide-cancel-icon-font-weight: var(--ti-common-font-weight-1, 100); // 引导框关闭按钮图标顶部外边距 --ti-guide-cancel-icon-margin-top: -6px; // 引导框关闭按钮图标悬浮色 - --ti-guide-cancel-hover-icon-color: var(--ti-common-color-icon-hover); + --ti-guide-cancel-hover-icon-color: var(--ti-common-color-icon-hover, #5e7ce0); // 引导框内容文本色 - --ti-guide-text-text-color: var(--ti-common-color-text-primary); + --ti-guide-text-text-color: var(--ti-common-color-text-primary, #252b3a); // 引导框内容行高 - --ti-guide-text-line-height: var(--ti-common-line-height-4); + --ti-guide-text-line-height: var(--ti-common-line-height-4, 20px); // 引导框内容字号 - --ti-guide-text-font-size: var(--ti-common-font-size-1); + --ti-guide-text-font-size: var(--ti-common-font-size-1, 14px); // 引导框内容上内边距 - --ti-guide-text-padding-top: var(--ti-common-space-6x); + --ti-guide-text-padding-top: var(--ti-common-space-6x, 24px); // 引导框内容水平内边距 - --ti-guide-text-padding-horizontal: var(--ti-common-space-6x); + --ti-guide-text-padding-horizontal: var(--ti-common-space-6x, 24px); // 引导框内容底部内边距 - --ti-guide-text-padding-bottom: calc(var(--ti-common-space-base) * 5.5); + --ti-guide-text-padding-bottom: calc(var(--ti-common-space-base, 4px) * 5.5); // 引导框内容滚动wrap左内边距 - --ti-guide-text-scrollbox-padding-right: var(--ti-common-space-2x); + --ti-guide-text-scrollbox-padding-right: var(--ti-common-space-2x, 8px); // 引导框内容滚动条宽度 - --ti-guide-text-scrollbar-width: var(--ti-common-scrollbar-width); + --ti-guide-text-scrollbar-width: var(--ti-common-scrollbar-width, 4px); // 引导框内容滚动条高度 - --ti-guide-text-scrollbar-height: var(--ti-common-scrollbar-height); + --ti-guide-text-scrollbar-height: var(--ti-common-scrollbar-height, 4px); // 引导框内容滚动条圆角 - --ti-guide-text-scrollbar-border-radius: var(--ti-common-scrollbar-thumb-border-radius); + --ti-guide-text-scrollbar-border-radius: var(--ti-common-scrollbar-thumb-border-radius, 6px); // 引导框内容滚动条边框色 - --ti-guide-text-scrollbar-border-color: var(--ti-common-scrollbar-thumb-active-bg-color); + --ti-guide-text-scrollbar-border-color: var(--ti-common-scrollbar-thumb-active-bg-color, #999999); // 引导框底部右下圆角 - --ti-guide-footer-border-bottom-right-radius: var(--ti-common-border-radius-1); + --ti-guide-footer-border-bottom-right-radius: var(--ti-common-border-radius-1, 4px); // 引导框底部左下圆角 - --ti-guide-footer-border-bottom-left-radius: var(--ti-common-border-radius-1); + --ti-guide-footer-border-bottom-left-radius: var(--ti-common-border-radius-1, 4px); // 引导框底部左内边距 - --ti-guide-footer-padding-left: var(--ti-common-space-6x); + --ti-guide-footer-padding-left: var(--ti-common-space-6x, 24px); // 引导框底部右内边距 - --ti-guide-footer-padding-right: var(--ti-common-space-6x); + --ti-guide-footer-padding-right: var(--ti-common-space-6x, 24px); // 引导框底部底部内边距 - --ti-guide-footer-padding-bottom: var(--ti-common-space-6x); + --ti-guide-footer-padding-bottom: var(--ti-common-space-6x, 24px); // 引导框进度条文本颜色 - --ti-guide-progress-text-color: var(--ti-common-color-primary-normal); + --ti-guide-progress-text-color: var(--ti-common-color-primary-normal, #5e7ce0); // 引导框按钮默认样式文本色 - --ti-guide-button-text-color: var(--ti-common-color-text-white); + --ti-guide-button-text-color: var(--ti-common-color-text-white, #fff); // 引导框按钮默认样式圆角 - --ti-guide-button-border-radius: var(--ti-common-border-radius-normal); + --ti-guide-button-border-radius: var(--ti-common-border-radius-normal, 2px); // 引导框按钮默认样式背景色 - --ti-guide-button-bg-color: var(--ti-common-color-primary-normal); + --ti-guide-button-bg-color: var(--ti-common-color-primary-normal, #5e7ce0); // 引导框按钮默认样式悬浮背景色 - --ti-guide-button-hover-bg-color: var(--ti-common-color-primary-hover); + --ti-guide-button-hover-bg-color: var(--ti-common-color-primary-hover, #7693f5); // 引导框按钮默认样式聚焦背景色 - --ti-guide-button-focus-bg-color: var(--ti-common-color-primary-active); + --ti-guide-button-focus-bg-color: var(--ti-common-color-primary-active, #7693f5); // 引导框按钮默认样式激活背景色 - --ti-guide-button-active-bg-color: var(--ti-common-color-primary-active); + --ti-guide-button-active-bg-color: var(--ti-common-color-primary-active, #7693f5); // 引导框按钮默认样式禁用背景色 - --ti-guide-button-disable-bg-color: var(--ti-common-color-primary-disabled-bgcolor); + --ti-guide-button-disable-bg-color: var(--ti-common-color-primary-disabled-bgcolor, #f5f5f6); // 引导框按钮默认样式禁用文本色 - --ti-guide-button-disable-text-color: var(--ti-common-color-primary-disabled-text); + --ti-guide-button-disable-text-color: var(--ti-common-color-primary-disabled-text, #adb0b8); // 引导框按钮透明样式文本色 - --ti-guide-button-secondary-text-color: var(--ti-common-color-text-primary); + --ti-guide-button-secondary-text-color: var(--ti-common-color-text-primary, #252b3a); // 引导框按钮透明样式背景色 - --ti-guide-button-secondary-bg-color: var(--ti-common-color-light); + --ti-guide-button-secondary-bg-color: var(--ti-common-color-light, #fff); // 引导框按钮透明样式边框色 - --ti-guide-button-secondary-border-color: var(--ti-common-color-border); + --ti-guide-button-secondary-border-color: var(--ti-common-color-border, #adb0b8); // 引导框按钮透明样式悬浮边框色 - --ti-guide-button-secondary-hover-border-color: var(--ti-common-color-primary-normal); + --ti-guide-button-secondary-hover-border-color: var(--ti-common-color-primary-normal, #5e7ce0); // 引导框按钮透明样式聚焦边框色 - --ti-guide-button-secondary-focus-border-color: var(--ti-common-color-primary-normal); + --ti-guide-button-secondary-focus-border-color: var(--ti-common-color-primary-normal, #5e7ce0); // 引导框按钮透明样式激活边框色 - --ti-guide-button-secondary-active-border-color: var(--ti-common-color-primary-normal); + --ti-guide-button-secondary-active-border-color: var(--ti-common-color-primary-normal, #5e7ce0); // 引导框按钮透明样式禁用背景色 - --ti-guide-button-secondary-disabled-bg-color: var(--ti-common-color-light); + --ti-guide-button-secondary-disabled-bg-color: var(--ti-common-color-light, #fff); // 引导框按钮透明样式禁用文本色 - --ti-guide-button-secondary-disabled-text-color: var(--ti-common-color-text-disabled); + --ti-guide-button-secondary-disabled-text-color: var(--ti-common-color-text-disabled, #adb0b8); // 引导框按钮透明样式禁用边框色 - --ti-guide-button-secondary-disabled-border-color: var(--ti-common-color-line-disabled); + --ti-guide-button-secondary-disabled-border-color: var(--ti-common-color-line-disabled, #dfe1e6); } diff --git a/packages/theme/src/hrapprover/vars.less b/packages/theme/src/hrapprover/vars.less index fb3cf22c8..fe5a8e48f 100644 --- a/packages/theme/src/hrapprover/vars.less +++ b/packages/theme/src/hrapprover/vars.less @@ -11,13 +11,13 @@ */ .component-css-vars-hrapprover() { - --ti-hrapprover-error-border-color: var(--ti-base-color-bg-8); - --ti-hrapprover-table-text-color: var(--ti-common-color-info-normal); - --ti-hrapprover-table-font-size: var(--ti-common-font-size-base); + --ti-hrapprover-error-border-color: var(--ti-base-color-bg-8, #c7000b); + --ti-hrapprover-table-text-color: var(--ti-common-color-info-normal, #252b3a); + --ti-hrapprover-table-font-size: var(--ti-common-font-size-base, 12px); --ti-hrapprover-tr-bg-color: #fafafa; - --ti-hrapprover-tr-hover-bg-color: var(--ti-common-color-hover-background); - --ti-hrapprover-tr-odd-bg-color: var(--ti-common-color-light); - --ti-hrapprover-th-height: var(--ti-common-size-height-small); - --ti-hrapprover-thead-border-color: var(--ti-common-color-border); + --ti-hrapprover-tr-hover-bg-color: var(--ti-common-color-hover-background, #f2f5fc); + --ti-hrapprover-tr-odd-bg-color: var(--ti-common-color-light, #fff); + --ti-hrapprover-th-height: var(--ti-common-size-height-small, 32px); + --ti-hrapprover-thead-border-color: var(--ti-common-color-border, #adb0b8); --ti-hrapprover-thead-bg-color: #f1f1f1; } diff --git a/packages/theme/src/image-viewer/vars.less b/packages/theme/src/image-viewer/vars.less index 4a390d2a3..0550ebf5a 100644 --- a/packages/theme/src/image-viewer/vars.less +++ b/packages/theme/src/image-viewer/vars.less @@ -11,9 +11,9 @@ */ .component-css-vars-image-viewer() { - --ti-image-viewer-text-color: var(--ti-common-color-light); - --ti-image-viewer-actions-inner-text-color: var(--ti-common-color-light); - --ti-image-viewer-close-font-size: var(--ti-common-font-size-4); + --ti-image-viewer-text-color: var(--ti-common-color-light, #fff); + --ti-image-viewer-actions-inner-text-color: var(--ti-common-color-light, #fff); + --ti-image-viewer-close-font-size: var(--ti-common-font-size-4, 20px); --ti-image-viewer-close-bg-color: #606266; --ti-image-viewer-close-top: 40px; --ti-image-viewer-close-right: 40px; @@ -26,7 +26,7 @@ --ti-image-viewer-actions-height: 44px; --ti-image-viewer-actions-bottom: 30px; --ti-image-viewer-actions-inner-justify-content: space-around; - --ti-image-viewer-next-font-size: var(--ti-common-font-size-5); + --ti-image-viewer-next-font-size: var(--ti-common-font-size-5, 24px); --ti-image-viewer-next-width: 44px; --ti-image-viewer-next-height: 44px; --ti-image-viewer-mask-wrap-bg-color: none; diff --git a/packages/theme/src/image/vars.less b/packages/theme/src/image/vars.less index 550d019c4..d26900e5c 100644 --- a/packages/theme/src/image/vars.less +++ b/packages/theme/src/image/vars.less @@ -12,9 +12,9 @@ .component-css-vars-image() { // 图片错误字号 - --ti-image-error-font-size: var(--ti-common-font-size-1); + --ti-image-error-font-size: var(--ti-common-font-size-1, 14px); // 图片错误色 - --ti-image-error-text-color: var(--ti-common-color-bg-secondary); + --ti-image-error-text-color: var(--ti-common-color-bg-secondary, #adb0b8); // 图片错误背景色 - --ti-image-error-bg-color: var(--ti-common-color-bg-disabled); + --ti-image-error-bg-color: var(--ti-common-color-bg-disabled, #f5f5f6); } diff --git a/packages/theme/src/input/vars.less b/packages/theme/src/input/vars.less index f61d0455e..cc6b686a7 100644 --- a/packages/theme/src/input/vars.less +++ b/packages/theme/src/input/vars.less @@ -12,81 +12,81 @@ .component-css-vars-input() { // 输入框文本颜色 - --ti-input-text-color: var(--ti-common-color-text-primary); + --ti-input-text-color: var(--ti-common-color-text-primary, #252b3a); // 输入框背景颜色 - --ti-input-bg-color: var(--ti-common-color-icon-white); + --ti-input-bg-color: var(--ti-common-color-icon-white, #fff); // 输入框字体大小 - --ti-input-font-size: var(--ti-common-font-size-base); + --ti-input-font-size: var(--ti-common-font-size-base, 12px); // 输入框计数器字体大小 - --ti-input-count-font-size: var(--ti-common-font-size-base); + --ti-input-count-font-size: var(--ti-common-font-size-base, 12px); // 输入框高度 - --ti-input-height: var(--ti-common-size-height-normal); + --ti-input-height: var(--ti-common-size-height-normal, 28px); // 输入框边框圆角 - --ti-input-border-radius: var(--ti-common-border-radius-normal); + --ti-input-border-radius: var(--ti-common-border-radius-normal, 2px); // 输入框边框色 - --ti-input-border-color: var(--ti-common-color-border); + --ti-input-border-color: var(--ti-common-color-border, #adb0b8); // 输入框hover时边框色 - --ti-input-hover-border-color: var(--ti-common-color-border-hover); + --ti-input-hover-border-color: var(--ti-common-color-border-hover, #575d6c); // 输入框active时边框色 - --ti-input-active-border-color: var(--ti-common-color-line-active); + --ti-input-active-border-color: var(--ti-common-color-line-active, #5e7ce0); // icon颜色 - --ti-input-icon-color: var(--ti-common-color-border-hover); + --ti-input-icon-color: var(--ti-common-color-border-hover, #575d6c); // 输入框聚焦时icon颜色 - --ti-input-focus-icon-color: var(--ti-common-color-border-hover); + --ti-input-focus-icon-color: var(--ti-common-color-border-hover, #575d6c); // suffix图标颜色 - --ti-input-suffix-icon-color: var(--ti-common-color-border-hover); + --ti-input-suffix-icon-color: var(--ti-common-color-border-hover, #575d6c); // 输入框占位符文本颜色 - --ti-input-placeholder-text-color: var(--ti-common-color-placeholder); + --ti-input-placeholder-text-color: var(--ti-common-color-placeholder, #adb0b8); // 输入框disabled时的文本颜色 - --ti-input-disabled-text-color: var(--ti-common-color-text-disabled); + --ti-input-disabled-text-color: var(--ti-common-color-text-disabled, #adb0b8); // 输入框medium尺寸的高度 - --ti-input-medium-height: var(--ti-common-size-height-medium); + --ti-input-medium-height: var(--ti-common-size-height-medium, 40px); // 输入框small尺寸的高度 - --ti-input-small-height: var(--ti-common-size-height-small); + --ti-input-small-height: var(--ti-common-size-height-small, 32px); // 输入框mini尺寸的高度 - --ti-input-mini-height: var(--ti-common-size-height-mini); + --ti-input-mini-height: var(--ti-common-size-height-mini, 24px); // 输入框disabled时的背景颜色 - --ti-input-disabled-bg-color: var(--ti-common-color-bg-disabled); + --ti-input-disabled-bg-color: var(--ti-common-color-bg-disabled, #f5f5f6); // 输入框disabled时的边框颜色 - --ti-input-disabled-border-color: var(--ti-common-color-line-disabled); + --ti-input-disabled-border-color: var(--ti-common-color-line-disabled, #dfe1e6); // 输入框exceed时的文本颜色 - --ti-input-exceed-text-color: var(--ti-common-bg-primary); + --ti-input-exceed-text-color: var(--ti-common-bg-primary, #c7000b); // 输入框的清除icon图标的文本颜色 - --ti-input-clear-text-color: var(--ti-common-color-icon-graybg-normal); + --ti-input-clear-text-color: var(--ti-common-color-icon-graybg-normal, #adb0b8); // 输入框的icon图标的字体大小 - --ti-input-icon-font-size: var(--ti-common-font-size-1); + --ti-input-icon-font-size: var(--ti-common-font-size-1, 14px); // 输入框的关闭icon图标的文本颜色 - --ti-input-icon-close-text-color: var(--ti-common-color-icon-graybg-active); + --ti-input-icon-close-text-color: var(--ti-common-color-icon-graybg-active, #5e7ce0); // 输入框的清除icon图标hover时的文本颜色 - --ti-input-clear-text-color-hover: var(--ti-common-color-icon-hover); + --ti-input-clear-text-color-hover: var(--ti-common-color-icon-hover, #5e7ce0); // 文本框计数器的颜色 - --ti-input-textarea-count-color: var(--ti-common-color-text-weaken); + --ti-input-textarea-count-color: var(--ti-common-color-text-weaken, #8a8e99); // 文本框垂直方向内边距 - --ti-input-textarea-padding-vertical: var(--ti-common-space-2x); + --ti-input-textarea-padding-vertical: var(--ti-common-space-2x, 8px); // 文本框水平方向内边距 - --ti-input-textarea-padding-horizontal: var(--ti-common-space-2x); + --ti-input-textarea-padding-horizontal: var(--ti-common-space-2x, 8px); // 输入框计数器的颜色 - --ti-input-count-color: var(--ti-common-color-text-weaken); + --ti-input-count-color: var(--ti-common-color-text-weaken, #8a8e99); // 输入框垂直方向内边距 - --ti-input-padding-vertical: var(--ti-common-space-0); + --ti-input-padding-vertical: var(--ti-common-space-0, 0px); // 输入框水平方向内边距 - --ti-input-padding-horizontal: var(--ti-common-space-2x); + --ti-input-padding-horizontal: var(--ti-common-space-2x, 8px); // 输入框配置suffix时的右侧内边距 - --ti-input-suffix-padding-right: calc(var(--ti-common-space-8x) - 2px); + --ti-input-suffix-padding-right: calc(var(--ti-common-space-8x, 32px) - 2px); // 输入框配置suffix时的左侧内边距 - --ti-input-suffix-padding-left: var(--ti-common-space-2x); + --ti-input-suffix-padding-left: var(--ti-common-space-2x, 8px); // 输入框配置prefix时的右侧外边距 - --ti-input-prefix-padding-right: calc(var(--ti-common-space-8x) - 4px); + --ti-input-prefix-padding-right: calc(var(--ti-common-space-8x, 32px) - 4px); // 输入框配置prefix时的左侧外边距 - --ti-input-prefix-padding-left: calc(var(--ti-common-space-8x) - 2px); + --ti-input-prefix-padding-left: calc(var(--ti-common-space-8x, 32px) - 2px); // suffix图标的右侧边距 - --ti-input-suffix-right: var(--ti-common-space-2x); + --ti-input-suffix-right: var(--ti-common-space-2x, 8px); // 计数器文本字数颜色 - --ti-input-count-textlength-color: var(--ti-common-color-text-weaken); + --ti-input-count-textlength-color: var(--ti-common-color-text-weaken, #8a8e99); // 输入框suffix的宽度 --ti-input-suffix-icon-width: 1em; // 输入框suffix的高度 --ti-input-suffix-icon-height: 1em; // 输入框placeholder颜色 - --ti-input-placeholder-color: var(--ti-common-color-placeholder); + --ti-input-placeholder-color: var(--ti-common-color-placeholder, #adb0b8); } diff --git a/packages/theme/src/ip-address/vars.less b/packages/theme/src/ip-address/vars.less index f3f14b6cf..9d91347ef 100644 --- a/packages/theme/src/ip-address/vars.less +++ b/packages/theme/src/ip-address/vars.less @@ -12,39 +12,39 @@ .component-css-vars-ip-address() { // IP地址输入框高度 - --ti-ip-address-normal-height: var(--ti-common-size-7x); + --ti-ip-address-normal-height: var(--ti-common-size-7x, 28px); // IP地址输入框宽度 - --ti-ip-address-normal-width: calc(var(--ti-common-size-base) * 40); + --ti-ip-address-normal-width: calc(var(--ti-common-size-base, 4px) * 40); // IP地址输入框默认水平内边距 - --ti-ip-address-padding-horizontal: var(--ti-common-space-0); + --ti-ip-address-padding-horizontal: var(--ti-common-space-0, 0px); // IP地址输入框默认文本色 - --ti-ip-address-normal-text-color: var(--ti-common-color-info-normal); + --ti-ip-address-normal-text-color: var(--ti-common-color-info-normal, #252b3a); // IP地址输入框图标文本色 - --ti-ip-address-icon-color: var(--ti-common-color-info-normal); + --ti-ip-address-icon-color: var(--ti-common-color-info-normal, #252b3a); // IP地址输入框图标尺寸 - --ti-ip-address-icon-size: calc(var(--ti-common-size-base) * 2.5); + --ti-ip-address-icon-size: calc(var(--ti-common-size-base, 4px) * 2.5); // IP地址输入框禁用文本色 - --ti-ip-address-normal-disabled-text-color: var(--ti-common-color-text-disabled); + --ti-ip-address-normal-disabled-text-color: var(--ti-common-color-text-disabled, #adb0b8); // IP地址输入框默认边框色 - --ti-ip-address-normal-border-color: var(--ti-common-color-border); + --ti-ip-address-normal-border-color: var(--ti-common-color-border, #adb0b8); // IP地址输入框默认背景色 - --ti-ip-address-normal-bg-color: var(--ti-common-color-light); + --ti-ip-address-normal-bg-color: var(--ti-common-color-light, #fff); // IP地址输入框圆角 - --ti-ip-address-border-radius: var(--ti-common-border-radius-normal); + --ti-ip-address-border-radius: var(--ti-common-border-radius-normal, 2px); // IP地址输入框字号 - --ti-ip-address-font-size: var(--ti-common-font-size-base); + --ti-ip-address-font-size: var(--ti-common-font-size-base, 12px); // IP地址输入框字族 - --ti-ip-address-normal-font-family: var(--ti-common-font-family); + --ti-ip-address-normal-font-family: var(--ti-common-font-family, 'Helvetica', 'Arial', 'PingFangSC-Regular', 'Hiragino Sans GB', 'Microsoft YaHei', '微软雅黑', 'Microsoft JhengHei'); // IP地址输入框行高 - --ti-ip-address-line-height: var(--ti-common-line-height-2); + --ti-ip-address-line-height: var(--ti-common-line-height-2, 16px); // IP地址输入框聚焦边框色 - --ti-ip-address-border-color-focus: var(--ti-common-color-line-active); + --ti-ip-address-border-color-focus: var(--ti-common-color-line-active, #5e7ce0); // IP地址输入框悬浮边框色 - --ti-ip-address-border-color-hover: var(--ti-common-color-line-hover); + --ti-ip-address-border-color-hover: var(--ti-common-color-line-hover, #575d6c); // IP地址输入框禁用背景色 - --ti-ip-address-disabled-bg-color: var(--ti-common-color-bg-disabled); + --ti-ip-address-disabled-bg-color: var(--ti-common-color-bg-disabled, #f5f5f6); // IP地址输入框禁用边框色 - --ti-ip-address-disabled-border-color: var(--ti-common-color-line-disabled); + --ti-ip-address-disabled-border-color: var(--ti-common-color-line-disabled, #dfe1e6); // Ip地址输入框item宽度 - --ti-ip-address-input-width: var(--ti-common-size-8x); + --ti-ip-address-input-width: var(--ti-common-size-8x, 32px); } diff --git a/packages/theme/src/link-menu/vars.less b/packages/theme/src/link-menu/vars.less index ad4fb9581..02cb33a29 100644 --- a/packages/theme/src/link-menu/vars.less +++ b/packages/theme/src/link-menu/vars.less @@ -12,23 +12,23 @@ .component-css-vars-link-menu() { // 收藏夹设置按钮图标色(和取消按钮文本色) - --ti-link-menu-nav-item-text-color: var(--ti-base-color-brand-6); + --ti-link-menu-nav-item-text-color: var(--ti-base-color-brand-6, #5e7ce0); // 收藏夹菜单导航右边框色 --ti-link-menu-nav-item-border-color: #c4c4c4; // 收藏夹菜单按钮文本色 --ti-link-menu-btn-text-color: rgba(24, 144, 255, 0.8); // 收藏夹设置按钮,弹出框输入框和取消按钮的背景色 - --ti-link-menu-btn-bg-color: var(--ti-common-color-light); + --ti-link-menu-btn-bg-color: var(--ti-common-color-light, #fff); // 收藏夹弹出框的输入框高度 - --ti-link-menu-input-height: var(--ti-common-size-height-normal); + --ti-link-menu-input-height: var(--ti-common-size-height-normal, 28px); // 收藏夹弹出框字号 - --ti-link-menu-input-font-size: var(--ti-common-font-size-base); + --ti-link-menu-input-font-size: var(--ti-common-font-size-base, 12px); // 收藏夹弹出框输入框(和列表项非节点)的文本色 - --ti-link-menu-input-text-color: var(--ti-common-color-info-normal); + --ti-link-menu-input-text-color: var(--ti-common-color-info-normal, #252b3a); // 收藏夹弹出框的输入框和取消按钮边框色 - --ti-link-menu-input-border-color: var(--ti-common-color-border); + --ti-link-menu-input-border-color: var(--ti-common-color-border, #adb0b8); // 收藏夹弹出框的输入框圆角 - --ti-link-menu-input-border-radius: var(--ti-common-border-radius-normal); + --ti-link-menu-input-border-radius: var(--ti-common-border-radius-normal, 2px); // 收藏夹弹出框列表项的节点文本色 - --ti-link-menu-tree-node-text-color: var(--ti-common-color-text-disabled); + --ti-link-menu-tree-node-text-color: var(--ti-common-color-text-disabled, #adb0b8); } diff --git a/packages/theme/src/link/vars.less b/packages/theme/src/link/vars.less index 8f1f1d1cd..51a7ce7a7 100644 --- a/packages/theme/src/link/vars.less +++ b/packages/theme/src/link/vars.less @@ -12,11 +12,11 @@ .component-css-vars-link() { // 链接字号 - --ti-link-font-size: var(--ti-common-font-size-1); + --ti-link-font-size: var(--ti-common-font-size-1, 14px); // 链接字重 - --ti-link-font-weight: var(--ti-common-font-weight-5); + --ti-link-font-weight: var(--ti-common-font-weight-5, 500); // 链接下划线色(hide) - --ti-link-border-color: var(--ti-common-color-line-active); + --ti-link-border-color: var(--ti-common-color-line-active, #5e7ce0); // 链接有图标时下划线宽度(hide) --ti-link-has-icon-underline-width: 100%; // 链接只有文字时下划线宽度(hide) @@ -31,65 +31,65 @@ --ti-link-svg-margin-right: 0px; // 链接图标悬浮字重 - --ti-link-icon-hover-text-weight: var(--ti-common-font-weight-5); + --ti-link-icon-hover-text-weight: var(--ti-common-font-weight-5, 500); // 默认链接文本色 - --ti-link-default-text-color: var(--ti-common-color-info-text); + --ti-link-default-text-color: var(--ti-common-color-info-text, #252b3a); // 默认链接悬浮下划线色 - --ti-link-default-border-color: var(--ti-common-color-line-active); + --ti-link-default-border-color: var(--ti-common-color-line-active, #5e7ce0); // 默认链接悬浮文本色 - --ti-link-default-hover-text-color: var(--ti-common-color-text-link); + --ti-link-default-hover-text-color: var(--ti-common-color-text-link, #526ecc); // 默认链接禁用文本色 - --ti-link-default-disabled-text-color: var(--ti-common-color-info-disabled); + --ti-link-default-disabled-text-color: var(--ti-common-color-info-disabled, #bfbfbf); // 默认链接悬浮下划线色 --ti-link-default-hover-border-color: var(--ti-link-default-hover-text-color); // 主要链接文本色 - --ti-link-primary-text-color: var(--ti-common-color-primary-normal); + --ti-link-primary-text-color: var(--ti-common-color-primary-normal, #5e7ce0); // 主要链接悬浮下划线色 - --ti-link-primary-border-color: var(--ti-common-color-line-active); + --ti-link-primary-border-color: var(--ti-common-color-line-active, #5e7ce0); // 主要链接悬浮文本色 - --ti-link-primary-hover-text-color: var(--ti-common-color-primary-hover); + --ti-link-primary-hover-text-color: var(--ti-common-color-primary-hover, #7693f5); // 主要链接禁用文本色 - --ti-link-primary-disabled-text-color: var(--ti-common-color-primary-disabled); + --ti-link-primary-disabled-text-color: var(--ti-common-color-primary-disabled, #a0cfff); // 危险链接文本色 - --ti-link-danger-text-color: var(--ti-common-bg-primary); + --ti-link-danger-text-color: var(--ti-common-bg-primary, #c7000b); // 危险链接悬浮下划线色 - --ti-link-danger-border-color: var(--ti-common-bg-primary); + --ti-link-danger-border-color: var(--ti-common-bg-primary, #c7000b); // 危险链接悬浮文本色 - --ti-link-danger-hover-text-color: var(--ti-common-bg-primary-hover); + --ti-link-danger-hover-text-color: var(--ti-common-bg-primary-hover, #d64a52); // 危险链接禁用文本色 - --ti-link-danger-disabled-text-color: var(--ti-common-color-danger-disabled); + --ti-link-danger-disabled-text-color: var(--ti-common-color-danger-disabled, #d8bab5); // 成功链接文本色 - --ti-link-success-text-color: var(--ti-common-color-success-normal); + --ti-link-success-text-color: var(--ti-common-color-success-normal, #50d4ab); // 成功链接悬浮下划线色 - --ti-link-success-border-color: var(--ti-common-color-success-normal); + --ti-link-success-border-color: var(--ti-common-color-success-normal, #50d4ab); // 成功链接悬浮文本色 - --ti-link-success-hover-text-color: var(--ti-common-color-success-hover); + --ti-link-success-hover-text-color: var(--ti-common-color-success-hover, #acf2dc); // 成功链接禁用文本色 - --ti-link-success-disabled-text-color: var(--ti-common-color-success-disabled); + --ti-link-success-disabled-text-color: var(--ti-common-color-success-disabled, #a6c3b9); // 警告链接文本色 - --ti-link-warning-text-color: var(--ti-common-color-warning-normal); + --ti-link-warning-text-color: var(--ti-common-color-warning-normal, #fa9841); // 警告链接悬浮下划线色 - --ti-link-warning-border-color: var(--ti-common-color-warning-normal); + --ti-link-warning-border-color: var(--ti-common-color-warning-normal, #fa9841); // 警告链接悬浮文本色 - --ti-link-warning-hover-text-color: var(--ti-common-color-warning-hover); + --ti-link-warning-hover-text-color: var(--ti-common-color-warning-hover, #fac20a); // 警告链接禁用文本色 - --ti-link-warning-disabled-text-color: var(--ti-common-color-warning-disabled); + --ti-link-warning-disabled-text-color: var(--ti-common-color-warning-disabled, #d3c6a2); // 信息链接文本色 - --ti-link-info-text-color: var(--ti-common-color-info-normal); + --ti-link-info-text-color: var(--ti-common-color-info-normal, #252b3a); // 信息链接悬浮下划线色 - --ti-link-info-border-color: var(--ti-common-color-info-normal); + --ti-link-info-border-color: var(--ti-common-color-info-normal, #252b3a); // 信息链接悬浮文本色 - --ti-link-info-hover-text-color: var(--ti-common-color-info-hover); + --ti-link-info-hover-text-color: var(--ti-common-color-info-hover, #5c6173); // 信息链接禁用文本色 - --ti-link-info-disabled-text-color: var(--ti-common-color-info-disabled); + --ti-link-info-disabled-text-color: var(--ti-common-color-info-disabled, #bfbfbf); // 带有图标的链接悬浮文本色 - --ti-link-has-svg-hover-text-color: var(--ti-common-color-text-link); + --ti-link-has-svg-hover-text-color: var(--ti-common-color-text-link, #526ecc); } diff --git a/packages/theme/src/loading/vars.less b/packages/theme/src/loading/vars.less index fdb16cfa2..dab0df994 100644 --- a/packages/theme/src/loading/vars.less +++ b/packages/theme/src/loading/vars.less @@ -12,39 +12,39 @@ .component-css-vars-loading() { // 加载图标文本色 - --ti-loading-text-color: var(--ti-common-color-icon-active); + --ti-loading-text-color: var(--ti-common-color-icon-active, #5e7ce0); // 加载背景色 - --ti-loading-mask-bg-color: var(--ti-common-bg-minor); + --ti-loading-mask-bg-color: var(--ti-common-bg-minor, #ffffff); // 加载文本字号 - --ti-loading-text-font-size: var(--ti-common-font-size-1); + --ti-loading-text-font-size: var(--ti-common-font-size-1, 14px); // 加载图标自定义加载图标顶部外边距 - --ti-loading-spinner-margin-top: calc(var(--ti-common-space-0) - 21px); + --ti-loading-spinner-margin-top: calc(var(--ti-common-space-0, 0px) - 21px); // 加载图标文本垂直方向外边距 - --ti-loading-text-margin-vertical: calc(var(--ti-common-space-base) - 1px); + --ti-loading-text-margin-vertical: calc(var(--ti-common-space-base, 4px) - 1px); // 加载图标文本水平方向外边距 - --ti-loading-text-margin-horizontal: var(--ti-common-space-0); + --ti-loading-text-margin-horizontal: var(--ti-common-space-0, 0px); // 全屏加载图标small尺寸时的宽度 - --ti-loading-fullscreen-small-width: var(--ti-common-size-4x); + --ti-loading-fullscreen-small-width: var(--ti-common-size-4x, 16px); // 全屏加载图标medium尺寸时的宽度 - --ti-loading-fullscreen-medium-width: var(--ti-common-size-8x); + --ti-loading-fullscreen-medium-width: var(--ti-common-size-8x, 32px); // 全屏加载图标large尺寸时的宽度 - --ti-loading-fullscreen-large-width: var(--ti-common-size-10x); + --ti-loading-fullscreen-large-width: var(--ti-common-size-10x, 40px); // 全屏加载图标small尺寸时的高度 - --ti-loading-fullscreen-small-height: var(--ti-common-size-4x); + --ti-loading-fullscreen-small-height: var(--ti-common-size-4x, 16px); // 全屏加载图标medium尺寸时的高度 - --ti-loading-fullscreen-medium-height: var(--ti-common-size-8x); + --ti-loading-fullscreen-medium-height: var(--ti-common-size-8x, 32px); // 全屏加载图标large尺寸时的高度 - --ti-loading-fullscreen-large-height: var(--ti-common-size-10x); + --ti-loading-fullscreen-large-height: var(--ti-common-size-10x, 40px); // 默认加载图标small尺寸时的高度 - --ti-loading-spinner-small-height: var(--ti-common-size-4x); + --ti-loading-spinner-small-height: var(--ti-common-size-4x, 16px); // 默认加载图标medium尺寸时的高度 - --ti-loading-spinner-medium-height: var(--ti-common-size-8x); + --ti-loading-spinner-medium-height: var(--ti-common-size-8x, 32px); // 默认加载图标large尺寸时的高度 - --ti-loading-spinner-large-height: var(--ti-common-size-10x); + --ti-loading-spinner-large-height: var(--ti-common-size-10x, 40px); // 默认加载图标small尺寸时的宽度 - --ti-loading-spinner-small-width: var(--ti-common-size-4x); + --ti-loading-spinner-small-width: var(--ti-common-size-4x, 16px); // 默认加载图标medium尺寸时的宽度 - --ti-loading-spinner-medium-width: var(--ti-common-size-8x); + --ti-loading-spinner-medium-width: var(--ti-common-size-8x, 32px); // 默认加载图标large尺寸时的宽度 - --ti-loading-spinner-large-width: var(--ti-common-size-10x); + --ti-loading-spinner-large-width: var(--ti-common-size-10x, 40px); } diff --git a/packages/theme/src/menubar/vars.less b/packages/theme/src/menubar/vars.less index c7749dde9..c66cda1a9 100644 --- a/packages/theme/src/menubar/vars.less +++ b/packages/theme/src/menubar/vars.less @@ -12,15 +12,15 @@ .component-css-vars-menubar() { --ti-menubar-title-font-size: var(--ti-common-font-size-base-normal); - --ti-menubar-title-text-color: var(--ti-common-color-light); - --ti-menubar-li-height: var(--ti-common-size-12x); - --ti-menubar-menu-height: var(--ti-common-size-height-large); - --ti-menubar-menu-font-size: var(--ti-common-font-size-1); - --ti-menubar-submenu-normal-text-color: var(--ti-common-color-info-normal); - --ti-menubar-submenu-hover-bg-color: var(--ti-common-color-hover-background); - --ti-menubar-submenu-active-bg-color: var(--ti-common-color-selected-background); - --ti-menubar-submenu-li-height: var(--ti-common-size-10x); - --ti-menubar-bg-color-normal: var(--ti-common-color-bg-navigation); + --ti-menubar-title-text-color: var(--ti-common-color-light, #fff); + --ti-menubar-li-height: var(--ti-common-size-12x, 48px); + --ti-menubar-menu-height: var(--ti-common-size-height-large, 48px); + --ti-menubar-menu-font-size: var(--ti-common-font-size-1, 14px); + --ti-menubar-submenu-normal-text-color: var(--ti-common-color-info-normal, #252b3a); + --ti-menubar-submenu-hover-bg-color: var(--ti-common-color-hover-background, #f2f5fc); + --ti-menubar-submenu-active-bg-color: var(--ti-common-color-selected-background, #5e7ce0); + --ti-menubar-submenu-li-height: var(--ti-common-size-10x, 40px); + --ti-menubar-bg-color-normal: var(--ti-common-color-bg-navigation, #282b33); --ti-menubar-bg-color-active: #474c5e; --ti-menubar-dropdown-border-color: #c9ccda; --ti-menubar-dropdown-hover-border-color: #585f7f; diff --git a/packages/theme/src/milestone/vars.less b/packages/theme/src/milestone/vars.less index 42c8d0317..d67cfc0a5 100644 --- a/packages/theme/src/milestone/vars.less +++ b/packages/theme/src/milestone/vars.less @@ -12,29 +12,29 @@ .component-css-vars-milestone() { // 字号(不含旗子部分) - --ti-milestone-font-size: var(--ti-common-font-size-base); + --ti-milestone-font-size: var(--ti-common-font-size-base, 12px); // 节点实心显示光晕背景色 - --ti-milestone-bg-color: var(--ti-common-color-icon-white); + --ti-milestone-bg-color: var(--ti-common-color-icon-white, #fff); // 节点宽度 - --ti-milestone-icon-width: var(--ti-common-size-5x); + --ti-milestone-icon-width: var(--ti-common-size-5x, 20px); // 节点高度 - --ti-milestone-icon-height: var(--ti-common-size-5x); + --ti-milestone-icon-height: var(--ti-common-size-5x, 20px); // 未完成线路背景色 --ti-milestone-line-bg-color: #dbdbdb; // 节点下方日期文本色 - --ti-milestone-status-text-color: var(--ti-common-color-placeholder); + --ti-milestone-status-text-color: var(--ti-common-color-placeholder, #adb0b8); // 提示行高(hide) - --ti-milestone-flag-tip-line-height: var(--ti-common-line-height-4); + --ti-milestone-flag-tip-line-height: var(--ti-common-line-height-4, 20px); // 提示背景色(hide) - --ti-milestone-flag-tip-bg-color: var(--ti-common-color-bg-secondary); + --ti-milestone-flag-tip-bg-color: var(--ti-common-color-bg-secondary, #adb0b8); // 提示圆角(hide) - --ti-milestone-flag-tip-border-radius: var(--ti-common-border-radius-normal); + --ti-milestone-flag-tip-border-radius: var(--ti-common-border-radius-normal, 2px); // 旗子圆角 - --ti-milestone-flag-content-border-radius: var(--ti-common-border-radius-1); + --ti-milestone-flag-content-border-radius: var(--ti-common-border-radius-1, 4px); // 旗子默认字号(hide) - --ti-milestone-flag-content-font-size: var(--ti-common-font-size-1); + --ti-milestone-flag-content-font-size: var(--ti-common-font-size-1, 14px); // 旗子文本色 - --ti-milestone-text-color: var(--ti-common-color-light); + --ti-milestone-text-color: var(--ti-common-color-light, #fff); // 旗子字号 - --ti-milestone-flag-font-size: var(--ti-common-font-size-base); + --ti-milestone-flag-font-size: var(--ti-common-font-size-base, 12px); } diff --git a/packages/theme/src/modal/vars.less b/packages/theme/src/modal/vars.less index 81c47a057..4c490676c 100644 --- a/packages/theme/src/modal/vars.less +++ b/packages/theme/src/modal/vars.less @@ -12,110 +12,110 @@ .component-css-vars-modal() { // 默认宽度 - --ti-modal-box-width: calc(var(--ti-common-space-10) * 40); + --ti-modal-box-width: calc(var(--ti-common-space-10, 10px) * 40); // 模态框阴影 --ti-modal-box-shadow: 0 10px 40px 0 rgba(0, 0, 0, 0.1); // 字体族(hide) - --ti-modal-font-family: var(--ti-common-font-family); + --ti-modal-font-family: var(--ti-common-font-family, 'Helvetica', 'Arial', 'PingFangSC-Regular', 'Hiragino Sans GB', 'Microsoft YaHei', '微软雅黑', 'Microsoft JhengHei'); // 背景色 - --ti-modal-box-background-color: var(--ti-common-color-bg-white-normal); + --ti-modal-box-background-color: var(--ti-common-color-bg-white-normal, #fff); // 边框圆角 - --ti-modal-box-border-radius: var(--ti-common-border-radius-normal); + --ti-modal-box-border-radius: var(--ti-common-border-radius-normal, 2px); // 边框色 --ti-modal-border-color: transparent; // 图标尺寸 - --ti-modal-alert-icon-size: var(--ti-common-font-size-5); + --ti-modal-alert-icon-size: var(--ti-common-font-size-5, 24px); // 标题字号 - --ti-modal-header-font-size: var(--ti-common-font-size-3); + --ti-modal-header-font-size: var(--ti-common-font-size-3, 18px); // 标题文本色 - --ti-modal-header-text-color: var(--ti-common-color-text-primary); + --ti-modal-header-text-color: var(--ti-common-color-text-primary, #252b3a); // 标题字重 - --ti-modal-header-font-weight: var(--ti-common-font-weight-bold); + --ti-modal-header-font-weight: var(--ti-common-font-weight-bold, 700); // 标题上内边距 - --ti-modal-header-padding-top: var(--ti-common-space-8x); + --ti-modal-header-padding-top: var(--ti-common-space-8x, 32px); // 标题水平内边距 - --ti-modal-header-padding-horizontal: var(--ti-common-space-8x); + --ti-modal-header-padding-horizontal: var(--ti-common-space-8x, 32px); // 标题下内边距 - --ti-modal-header-padding-bottom: calc(var(--ti-common-space-base) * 7); + --ti-modal-header-padding-bottom: calc(var(--ti-common-space-base, 4px) * 7); // 内容上内边距 - --ti-modal-body-padding-top: var(--ti-common-space-0); + --ti-modal-body-padding-top: var(--ti-common-space-0, 0px); // 内容水平内边距 - --ti-modal-body-padding-horizontal: var(--ti-common-space-8x); + --ti-modal-body-padding-horizontal: var(--ti-common-space-8x, 32px); // 内容下内边距 - --ti-modal-body-padding-bottom: var(--ti-common-space-0); + --ti-modal-body-padding-bottom: var(--ti-common-space-0, 0px); // 内容字号 - --ti-modal-body-font-size: var(--ti-common-font-size-base); + --ti-modal-body-font-size: var(--ti-common-font-size-base, 12px); // 内容文本色 - --ti-modal-body-text-color: var(--ti-common-color-text-primary); + --ti-modal-body-text-color: var(--ti-common-color-text-primary, #252b3a); // 内容行高 - --ti-modal-body-line-height: var(--ti-common-line-height-number); + --ti-modal-body-line-height: var(--ti-common-line-height-number, 1.5); // 底部上内边距 - --ti-modal-footer-padding-top: calc(var(--ti-common-space-base) * 7); + --ti-modal-footer-padding-top: calc(var(--ti-common-space-base, 4px) * 7); // 底部水平内边距 - --ti-modal-footer-padding-horizontal: var(--ti-common-space-8x); + --ti-modal-footer-padding-horizontal: var(--ti-common-space-8x, 32px); // 底部下内边距 - --ti-modal-footer-padding-bottom: var(--ti-common-space-8x); + --ti-modal-footer-padding-bottom: var(--ti-common-space-8x, 32px); // 底部按钮圆角 - --ti-modal-footer-btn-border-radius: var(--ti-common-border-radius-normal); + --ti-modal-footer-btn-border-radius: var(--ti-common-border-radius-normal, 2px); // 底部按钮最小宽度 - --ti-modal-footer-btn-min-width: var(--ti-common-size-16x); + --ti-modal-footer-btn-min-width: var(--ti-common-size-16x, 64px); // 信息提示弹窗标题下边距 - --ti-modal-notification-header-padding-bottom: var(--ti-common-space-3x); + --ti-modal-notification-header-padding-bottom: var(--ti-common-space-3x, 12px); // message字号 - --ti-modal-message-font-size: var(--ti-common-font-size-3); + --ti-modal-message-font-size: var(--ti-common-font-size-3, 18px); // message阴影 --ti-modal-message-box-shadow: var(--ti-modal-box-shadow); // message左内边距 - --ti-modal-message-padding-left: var(--ti-common-space-6x); + --ti-modal-message-padding-left: var(--ti-common-space-6x, 24px); // message右内边距 - --ti-modal-message-padding-right: var(--ti-common-space-6x); + --ti-modal-message-padding-right: var(--ti-common-space-6x, 24px); // message垂直内边距 - --ti-modal-message-padding-vertical: var(--ti-common-space-6x); + --ti-modal-message-padding-vertical: var(--ti-common-space-6x, 24px); // message内容水平内边距(hide) - --ti-modal-message-body-padding-horizontal: var(--ti-common-space-8x); + --ti-modal-message-body-padding-horizontal: var(--ti-common-space-8x, 32px); // message状态图标尺寸 - --ti-modal-message-status-icon-size: var(--ti-common-font-size-2); + --ti-modal-message-status-icon-size: var(--ti-common-font-size-2, 16px); // message状态图标右边距 - --ti-modal-message-status-icon-padding-right: var(--ti-common-space-2x); + --ti-modal-message-status-icon-padding-right: var(--ti-common-space-2x, 8px); // message关闭图标尺寸 - --ti-modal-message-close-icon-size: var(--ti-common-space-4x); + --ti-modal-message-close-icon-size: var(--ti-common-space-4x, 16px); // message图标父组件高度（hide) - --ti-modal-message-icon-box-height: var(--ti-common-size-4x); + --ti-modal-message-icon-box-height: var(--ti-common-size-4x, 16px); // message关闭图标左边距 - --ti-modal-message-close-icon-margin-left: var(--ti-common-space-3x); + --ti-modal-message-close-icon-margin-left: var(--ti-common-space-3x, 12px); // 基本提示图标色 - --ti-modal-primary-icon-color: var(--ti-common-color-prompt); + --ti-modal-primary-icon-color: var(--ti-common-color-prompt, #5e7ce0); // 成功提示图标色 - --ti-modal-success-icon-color: var(--ti-common-color-success); + --ti-modal-success-icon-color: var(--ti-common-color-success, #50d4ab); // 错误提示图标色 - --ti-modal-error-icon-color: var(--ti-common-color-error); + --ti-modal-error-icon-color: var(--ti-common-color-error, #f66f6a); // 警告提示图标色 - --ti-modal-warning-icon-color: var(--ti-common-color-warn); + --ti-modal-warning-icon-color: var(--ti-common-color-warn, #fa9841); // 加载提示图标色 - --ti-modal-loading-icon-color: var(--ti-common-color-prompt); + --ti-modal-loading-icon-color: var(--ti-common-color-prompt, #5e7ce0); // 状态图标右边距 - --ti-modal-status-icon-padding-right: var(--ti-common-space-2x); + --ti-modal-status-icon-padding-right: var(--ti-common-space-2x, 8px); // 关闭按钮字号 - --ti-modal-close-btn-font-size: var(--ti-common-font-size-1); + --ti-modal-close-btn-font-size: var(--ti-common-font-size-1, 14px); // 关闭按钮与上边框的距离(hide) - --ti-modal-close-btn-top: var(--ti-common-space-5x); + --ti-modal-close-btn-top: var(--ti-common-space-5x, 20px); // 关闭按钮内边距 - --ti-modal-close-btn-padding-horizontal-vertical: var(--ti-common-space-0); + --ti-modal-close-btn-padding-horizontal-vertical: var(--ti-common-space-0, 0px); // 关闭按钮图标色 - --ti-modal-close-btn-icon-color: var(--ti-common-color-text-secondary); + --ti-modal-close-btn-icon-color: var(--ti-common-color-text-secondary, #575d6c); // 关闭按钮悬浮图标色 - --ti-modal-close-btn-hover-icon-color: var(--ti-common-color-icon-hover); + --ti-modal-close-btn-hover-icon-color: var(--ti-common-color-icon-hover, #5e7ce0); // 关闭按钮悬浮背景色 - --ti-modal-close-btn-background-color-hover: var(--ti-common-color-bg-white-normal); + --ti-modal-close-btn-background-color-hover: var(--ti-common-color-bg-white-normal, #fff); // 关闭按钮与右边框的距离(hide) - --ti-modal-close-btn-right: var(--ti-common-space-5x); + --ti-modal-close-btn-right: var(--ti-common-space-5x, 20px); // 缩放按钮与右边框的距离(hide) - --ti-modal-zoom-btn-right: var(--ti-common-space-10x); + --ti-modal-zoom-btn-right: var(--ti-common-space-10x, 40px); } diff --git a/packages/theme/src/month-table/vars.less b/packages/theme/src/month-table/vars.less index bd00339c1..fbf562b53 100644 --- a/packages/theme/src/month-table/vars.less +++ b/packages/theme/src/month-table/vars.less @@ -11,8 +11,8 @@ */ .component-css-vars-month-table() { - --ti-month-table-td-text-bg-color: var(--ti-base-color-brand-7); + --ti-month-table-td-text-bg-color: var(--ti-base-color-brand-7, #526ecc); --ti-month-table-td-range-bg-color: #f2f6fc; - --ti-month-table-td-date-text-color: var(--ti-common-color-light); + --ti-month-table-td-date-text-color: var(--ti-common-color-light, #fff); --ti-month-table-td-date-border-radius: 24px; } diff --git a/packages/theme/src/nav-menu/vars.less b/packages/theme/src/nav-menu/vars.less index 88a22af06..482f43ceb 100644 --- a/packages/theme/src/nav-menu/vars.less +++ b/packages/theme/src/nav-menu/vars.less @@ -12,77 +12,77 @@ .component-css-vars-nav-menu() { // 导航菜单栏高度 - --ti-nav-menu-height: var(--ti-common-size-height-large); + --ti-nav-menu-height: var(--ti-common-size-height-large, 48px); // 导航菜单栏背景色 - --ti-nav-menu-bg-color: var(--ti-common-color-bg-navigation); + --ti-nav-menu-bg-color: var(--ti-common-color-bg-navigation, #282b33); // 导航菜单栏字号 - --ti-nav-menu-item-font-size: var(--ti-common-font-size-2); + --ti-nav-menu-item-font-size: var(--ti-common-font-size-2, 16px); // 导航菜单栏文本色 - --ti-nav-menu-item-text-color: var(--ti-common-color-light); + --ti-nav-menu-item-text-color: var(--ti-common-color-light, #fff); // 导航菜单栏项悬浮背景色 --ti-nav-menu-item-hover-bg-color: #474c5e; // 导航菜单栏项选中下划线宽度 - --ti-nav-menu-item-selected-underline-width: var(--ti-common-size-14x); + --ti-nav-menu-item-selected-underline-width: var(--ti-common-size-14x, 56px); // 导航菜单栏项选中下划线高度 - --ti-nav-menu-item-selected-underline-height: calc(var(--ti-common-size-base) - 1); + --ti-nav-menu-item-selected-underline-height: calc(var(--ti-common-size-base, 4px) - 1); // 导航菜单栏项选中下划线圆角 - --ti-nav-menu-item-selected-border-radius: var(--ti-common-border-radius-0); + --ti-nav-menu-item-selected-border-radius: var(--ti-common-border-radius-0, 0px); // 导航菜单栏项选中下划线固定定位底部距离(hide) - --ti-nav-menu-item-selected-position-bottom: var(--ti-common-space-0); + --ti-nav-menu-item-selected-position-bottom: var(--ti-common-space-0, 0px); // 导航菜单栏项选中下划线背景色 - --ti-nav-menu-item-selected-underline-bg-color: var(--ti-common-color-light); + --ti-nav-menu-item-selected-underline-bg-color: var(--ti-common-color-light, #fff); // 导航菜单设置图标大小 - --ti-nav-menu-setting-font-size: calc(var(--ti-common-size-base) * 5.5); + --ti-nav-menu-setting-font-size: calc(var(--ti-common-size-base, 4px) * 5.5); // 导航菜单菜单栏下拉框阴影 --ti-nav-menu-popmenu-box-shadow: 0 0 4px var(--ti-nav-menu-popmenu-border-color); // 导航菜单菜单栏下拉框选中文本色 - --ti-nav-menu-popmenu-selected-text-color: var(--ti-common-color-info-normal); + --ti-nav-menu-popmenu-selected-text-color: var(--ti-common-color-info-normal, #252b3a); // 导航菜单菜单栏下拉框选中字重 - --ti-nav-menu-popmenu-selected-font-weight: var(--ti-common-font-weight-4); + --ti-nav-menu-popmenu-selected-font-weight: var(--ti-common-font-weight-4, normal); // 导航菜单菜单栏下拉框文本色 - --ti-nav-menu-popmenu-text-color: var(--ti-common-color-info-normal); + --ti-nav-menu-popmenu-text-color: var(--ti-common-color-info-normal, #252b3a); // 导航菜单下拉框边框色 - --ti-nav-menu-popmenu-border-color: var(--ti-common-color-border); + --ti-nav-menu-popmenu-border-color: var(--ti-common-color-border, #adb0b8); // 导航菜单更多按钮展示的下拉框右边框色 - --ti-nav-menu-popmenu-more-menu-border-color-right: var(--ti-common-color-border); + --ti-nav-menu-popmenu-more-menu-border-color-right: var(--ti-common-color-border, #adb0b8); // 导航菜单更多按钮展示的下拉框高度 - --ti-nav-menu-popmenu-more-item-height: var(--ti-common-space-10x); + --ti-nav-menu-popmenu-more-item-height: var(--ti-common-space-10x, 40px); // 导航菜单更多按钮展示的下拉框列表项图标文本色 - --ti-nav-menu-popmenu-more-item-icon-color: var(--ti-common-color-info-normal); + --ti-nav-menu-popmenu-more-item-icon-color: var(--ti-common-color-info-normal, #252b3a); // 导航菜单更多按钮展示的下拉框列表项文本色 - --ti-nav-menu-popmenu-more-item-text-color: var(--ti-common-color-info-normal); + --ti-nav-menu-popmenu-more-item-text-color: var(--ti-common-color-info-normal, #252b3a); // 导航菜单更多按钮展示的下拉框列表项图标悬浮文本色 - --ti-nav-menu-popmenu-more-item-hover-icon-color: var(--ti-common-color-primary-normal); + --ti-nav-menu-popmenu-more-item-hover-icon-color: var(--ti-common-color-primary-normal, #5e7ce0); // 导航菜单更多按钮展示的下拉框列表项 悬浮 文本色 - --ti-nav-menu-popmenu-more-item-hover-text-color: var(--ti-common-color-primary-normal); + --ti-nav-menu-popmenu-more-item-hover-text-color: var(--ti-common-color-primary-normal, #5e7ce0); // 导航菜单更多按钮展示的下拉框列表项选中背景色 - --ti-nav-menu-popmenu-more-item-selected-bg-color: var(--ti-common-color-bg-white-emphasize); + --ti-nav-menu-popmenu-more-item-selected-bg-color: var(--ti-common-color-bg-white-emphasize, #f2f5fc); // 导航菜单更多按钮展示的下拉框列表项选中分割线粗细 --ti-nav-menu-popmenu-more-item-before-width: 0; // 导航菜单下拉框可点选项的 悬浮 背景色 - --ti-nav-menu-popmenu-more-item-hover-bg-color: var(--ti-common-color-hover-background); + --ti-nav-menu-popmenu-more-item-hover-bg-color: var(--ti-common-color-hover-background, #f2f5fc); // 导航菜单下拉框非标题选项点击瞬间背景色 - --ti-nav-menu-popmenu-more-item-active-bg-color: var(--ti-common-color-selected-background); + --ti-nav-menu-popmenu-more-item-active-bg-color: var(--ti-common-color-selected-background, #5e7ce0); // 导航菜单下拉框副菜单区域垂直内边距 - --ti-nav-menu-submenu-padding-vertical: var(--ti-common-space-0); + --ti-nav-menu-submenu-padding-vertical: var(--ti-common-space-0, 0px); // 导航菜单下拉框副菜单区域水平内边距 - --ti-nav-menu-submenu-padding-horizontal: calc(var(--ti-common-space-base) * 21.5); + --ti-nav-menu-submenu-padding-horizontal: calc(var(--ti-common-space-base, 4px) * 21.5); // 导航菜单下拉框标题底部内边距 - --ti-nav-menu-popmenu-node-title-padding-bottom: var(--ti-common-space-0); + --ti-nav-menu-popmenu-node-title-padding-bottom: var(--ti-common-space-0, 0px); // 导航菜单下拉框标题顶部外边距 - --ti-nav-menu-popmenu-node-title-margin-top: var(--ti-common-space-0); + --ti-nav-menu-popmenu-node-title-margin-top: var(--ti-common-space-0, 0px); // 导航菜单下拉框标题右边外边距 - --ti-nav-menu-popmenu-node-title-margin-right: var(--ti-common-space-8x); + --ti-nav-menu-popmenu-node-title-margin-right: var(--ti-common-space-8x, 32px); // 导航菜单下拉框标题底部外边距 - --ti-nav-menu-popmenu-node-title-margin-bottom: var(--ti-common-space-3x); + --ti-nav-menu-popmenu-node-title-margin-bottom: var(--ti-common-space-3x, 12px); // 导航菜单下拉框标题左边外边距 - --ti-nav-menu-popmenu-node-title-margin-left: var(--ti-common-space-0); + --ti-nav-menu-popmenu-node-title-margin-left: var(--ti-common-space-0, 0px); // 导航菜单下拉框标题底部边框宽度 --ti-nav-menu-popmenu-title-border-weight-bottom: 0; // 导航菜单下拉框标题底部边框色 --ti-nav-menu-popmenu-title-border-color-bottom: transparent; // 导航菜单下拉框标题字号 - --ti-nav-menu-popmenu-node-title-font-size: var(--ti-common-font-size-1); + --ti-nav-menu-popmenu-node-title-font-size: var(--ti-common-font-size-1, 14px); // 导航菜单下拉框非标题项字号 - --ti-nav-menu-popmenu-node-item-font-size: var(--ti-common-font-size-base); + --ti-nav-menu-popmenu-node-item-font-size: var(--ti-common-font-size-base, 12px); } diff --git a/packages/theme/src/notify/vars.less b/packages/theme/src/notify/vars.less index a7598523f..67399b5d0 100644 --- a/packages/theme/src/notify/vars.less +++ b/packages/theme/src/notify/vars.less @@ -12,67 +12,67 @@ .component-css-vars-notify() { // 通知背景色 - --ti-notify-bg-color: var(--ti-common-color-prompt-bg); + --ti-notify-bg-color: var(--ti-common-color-prompt-bg, #ebf6ff); // info类型弹框背景色 - --ti-notify-info-bg-color: var(--ti-common-color-prompt-bg); + --ti-notify-info-bg-color: var(--ti-common-color-prompt-bg, #ebf6ff); // info类型弹框左侧图标色 - --ti-notify-info-icon-color: var(--ti-common-color-prompt); + --ti-notify-info-icon-color: var(--ti-common-color-prompt, #5e7ce0); // warning类型弹框背景色 - --ti-notify-warning-bg-color: var(--ti-common-color-warn-bg); + --ti-notify-warning-bg-color: var(--ti-common-color-warn-bg, #fff3e8); // warning类型弹框左侧图标色 - --ti-notify-warning-icon-color: var(--ti-common-color-warn); + --ti-notify-warning-icon-color: var(--ti-common-color-warn, #fa9841); // error类型弹框背景色 - --ti-notify-error-bg-color: var(--ti-common-color-error-bg); + --ti-notify-error-bg-color: var(--ti-common-color-error-bg, #ffeeed); // error类型弹框左侧图标色 - --ti-notify-error-icon-color: var(--ti-common-color-error); + --ti-notify-error-icon-color: var(--ti-common-color-error, #f66f6a); // success类型弹框背景色 - --ti-notify-success-bg-color: var(--ti-common-color-success-bg); + --ti-notify-success-bg-color: var(--ti-common-color-success-bg, #edfff9); // success类型弹框左侧图标色 - --ti-notify-success-icon-color: var(--ti-common-color-success); + --ti-notify-success-icon-color: var(--ti-common-color-success, #50d4ab); // 通知文本色（没有效果） - --ti-notify-text-color: var(--ti-common-color-bg-emphasize); + --ti-notify-text-color: var(--ti-common-color-bg-emphasize, #5e7ce0); // 弹框圆角 - --ti-notify-border-radius: var(--ti-common-border-radius-normal); + --ti-notify-border-radius: var(--ti-common-border-radius-normal, 2px); // 弹框文本色 - --ti-notify-title-text-color: var(--ti-common-color-info-normal); + --ti-notify-title-text-color: var(--ti-common-color-info-normal, #252b3a); // 内容文本色 - --ti-notify-content-text-color: var(--ti-common-color-info-normal); + --ti-notify-content-text-color: var(--ti-common-color-info-normal, #252b3a); // 弹框标题字号 - --ti-notify-title-font-size: var(--ti-common-font-size-1); + --ti-notify-title-font-size: var(--ti-common-font-size-1, 14px); // 通知标题字重（没有效果） - --ti-notify-title-font-weight: var(--ti-common-font-weight-7); + --ti-notify-title-font-weight: var(--ti-common-font-weight-7, bold); // 弹框标题顶部外边距 - --ti-notify-title-margin-top: var(--ti-common-space-0); + --ti-notify-title-margin-top: var(--ti-common-space-0, 0px); // 弹框标题水平外边距 - --ti-notify-title-margin-horizontal: var(--ti-common-space-0); + --ti-notify-title-margin-horizontal: var(--ti-common-space-0, 0px); // 弹框标题底部外边距 - --ti-notify-title-margin-bottom: var(--ti-common-space-2x); + --ti-notify-title-margin-bottom: var(--ti-common-space-2x, 8px); // 弹框内容字号(没有效果，优先级被覆盖) - --ti-notify-content-font-size: var(--ti-common-font-size-1); + --ti-notify-content-font-size: var(--ti-common-font-size-1, 14px); // 弹框文字顶部外边距 - --ti-notify-message-margin-top: var(--ti-common-space-0); + --ti-notify-message-margin-top: var(--ti-common-space-0, 0px); // 弹框文字底部外边距 - --ti-notify-message-margin-bottom: var(--ti-common-space-0); + --ti-notify-message-margin-bottom: var(--ti-common-space-0, 0px); // 弹框文字右外边距 - --ti-notify-message-margin-right: var(--ti-common-space-0); + --ti-notify-message-margin-right: var(--ti-common-space-0, 0px); // 弹框文字左外边距 - --ti-notify-message-margin-left: var(--ti-common-space-10); + --ti-notify-message-margin-left: var(--ti-common-space-10, 10px); // 弹框左侧图标尺寸 - --ti-notify-icon-size: var(--ti-common-font-size-5); + --ti-notify-icon-size: var(--ti-common-font-size-5, 24px); // 弹框关闭图标色 - --ti-notify-close-icon-color: var(--ti-base-color-common-7); + --ti-notify-close-icon-color: var(--ti-base-color-common-7, #252b3a); // 弹框最大宽度 --ti-notify-max-width: 400px; // 弹框阴影 - --ti-notify-box-shadow: var(--ti-common-shadow-4-down); + --ti-notify-box-shadow: var(--ti-common-shadow-4-down, 0 8px 40px 0 rgba(0, 0, 0, 0.2)); // 弹框垂直方向内边距 - --ti-notify-padding-vertical: var(--ti-common-space-4x); + --ti-notify-padding-vertical: var(--ti-common-space-4x, 16px); // 弹框水平方向内边距 - --ti-notify-padding-horizontal: var(--ti-common-space-4x); + --ti-notify-padding-horizontal: var(--ti-common-space-4x, 16px); // 关闭图标大小 - --ti-notify-close-icon-font-size: var(--ti-common-font-size-2); + --ti-notify-close-icon-font-size: var(--ti-common-font-size-2, 16px); // 关闭图标悬浮时颜色 - --ti-notify-close-hover-icon-color: var(--ti-base-color-common-7); + --ti-notify-close-hover-icon-color: var(--ti-base-color-common-7, #252b3a); // 弹框为top-left方向时左边距 --ti-notify-position-top-left: 10px; // 弹框为bottom-left方向时左边距 diff --git a/packages/theme/src/numeric/vars.less b/packages/theme/src/numeric/vars.less index 2144b2a87..c4b89050d 100644 --- a/packages/theme/src/numeric/vars.less +++ b/packages/theme/src/numeric/vars.less @@ -12,92 +12,92 @@ .component-css-vars-numeric() { // 默认宽度 - --ti-numeric-input-width: calc(var(--ti-common-space-base) * 45); + --ti-numeric-input-width: calc(var(--ti-common-space-base, 4px) * 45); // 默认高度 - --ti-numeric-input-normal-height: var(--ti-common-size-height-normal); + --ti-numeric-input-normal-height: var(--ti-common-size-height-normal, 28px); // 边框圆角 - --ti-numeric-input-border-radius: var(--ti-common-border-radius-normal); + --ti-numeric-input-border-radius: var(--ti-common-border-radius-normal, 2px); // 边框默认色 - --ti-numeric-input-normal-border-color: var(--ti-common-color-line-normal); + --ti-numeric-input-normal-border-color: var(--ti-common-color-line-normal, #adb0b8); // 分隔线颜色 - --ti-numeric-input-dividing-border-color: var(--ti-common-color-line-normal); + --ti-numeric-input-dividing-border-color: var(--ti-common-color-line-normal, #adb0b8); // 分割线高度 --ti-numeric-input-dividing-border-height: var(--ti-numeric-input-normal-height); // 禁用时分割线display(hide) --ti-numeric-input-dividing-border-display: 'block'; // 输入框字号 - --ti-numeric-input-normal-font-size: var(--ti-common-font-size-base); + --ti-numeric-input-normal-font-size: var(--ti-common-font-size-base, 12px); // 输入框字体色 - --ti-numeric-input-normal-text-color: var(--ti-common-color-text-primary); + --ti-numeric-input-normal-text-color: var(--ti-common-color-text-primary, #252b3a); // 默认背景色 - --ti-numeric-input-normal-bg-color: var(--ti-common-color-bg-white-normal); + --ti-numeric-input-normal-bg-color: var(--ti-common-color-bg-white-normal, #fff); // 按钮默认宽度 --ti-numeric-input-icon-width: calc(var(--ti-numeric-input-normal-height) - 1px); // 悬浮边框色 - --ti-numeric-input-normal-active-border-color: var(--ti-common-color-border-hover); + --ti-numeric-input-normal-active-border-color: var(--ti-common-color-border-hover, #575d6c); // 提示占位符文本色 - --ti-numeric-input-placeholder-text-color: var(--ti-common-color-placeholder); + --ti-numeric-input-placeholder-text-color: var(--ti-common-color-placeholder, #adb0b8); // 按钮悬浮图标色 - --ti-numeric-input-icon-color-hover: var(--ti-common-color-icon-normal); + --ti-numeric-input-icon-color-hover: var(--ti-common-color-icon-normal, #575d6c); // 按钮禁用图标色 - --ti-numeric-input-icon-color-disabled: var(--ti-common-color-icon-disabled); + --ti-numeric-input-icon-color-disabled: var(--ti-common-color-icon-disabled, #adb0b8); // 聚焦时边框色 - --ti-numeric-input-border-color-active: var(--ti-common-color-line-active); + --ti-numeric-input-border-color-active: var(--ti-common-color-line-active, #5e7ce0); // 图标大小 - --ti-numeric-input-icon-size: var(--ti-common-font-size-1); + --ti-numeric-input-icon-size: var(--ti-common-font-size-1, 14px); // 禁用文本色 - --ti-numeric-input-disabled-text-color: var(--ti-common-color-text-disabled); + --ti-numeric-input-disabled-text-color: var(--ti-common-color-text-disabled, #adb0b8); // 禁用背景色 - --ti-numeric-input-disabled-bg-color: var(--ti-common-color-bg-disabled); + --ti-numeric-input-disabled-bg-color: var(--ti-common-color-bg-disabled, #f5f5f6); // 禁用时边框色 - --ti-numeric-input-border-color-disabled: var(--ti-common-color-line-disabled); + --ti-numeric-input-border-color-disabled: var(--ti-common-color-line-disabled, #dfe1e6); // 按钮禁用时背景色 - --ti-numeric-input-btn-disabled-bg-color: var(--ti-common-color-bg-disabled); + --ti-numeric-input-btn-disabled-bg-color: var(--ti-common-color-bg-disabled, #f5f5f6); // 按钮禁用时分隔线颜色 - --ti-numeric-input-btn-border-color-disabled: var(--ti-common-color-line-disabled); + --ti-numeric-input-btn-border-color-disabled: var(--ti-common-color-line-disabled, #dfe1e6); // medium尺寸宽度 - --ti-numeric-input-width-medium: calc(var(--ti-common-space-10) * 27); + --ti-numeric-input-width-medium: calc(var(--ti-common-space-10, 10px) * 27); // medium尺寸高度 - --ti-numeric-input-height-medium: var(--ti-common-size-height-medium); + --ti-numeric-input-height-medium: var(--ti-common-size-height-medium, 40px); // medium尺寸按钮宽度 --ti-numeric-input-icon-width-medium: var(--ti-numeric-input-height-medium); // medium尺寸图标大小 - --ti-numeric-input-icon-size-medium: var(--ti-common-font-size-2); + --ti-numeric-input-icon-size-medium: var(--ti-common-font-size-2, 16px); // medium尺寸分割线高度 --ti-numeric-input-divider-height-medium: var(--ti-numeric-input-height-medium); // small尺寸宽度 - --ti-numeric-input-width-small: var(--ti-common-size-50x); + --ti-numeric-input-width-small: var(--ti-common-size-50x, 200px); // small尺寸高度 - --ti-numeric-input-height-small: var(--ti-common-size-9x); + --ti-numeric-input-height-small: var(--ti-common-size-9x, 36px); // small尺寸按钮宽度 --ti-numeric-input-icon-width-small: var(--ti-numeric-input-height-small); // small尺寸图标大小 - --ti-numeric-input-icon-size-small: var(--ti-common-font-size-1); + --ti-numeric-input-icon-size-small: var(--ti-common-font-size-1, 14px); // small尺寸分割线高度 --ti-numeric-input-divider-height-small: var(--ti-numeric-input-height-small); // mini尺寸宽度 - --ti-numeric-input-width-mini: calc(var(--ti-common-space-10) * 13); + --ti-numeric-input-width-mini: calc(var(--ti-common-space-10, 10px) * 13); // mini尺寸高度 - --ti-numeric-input-height-mini: var(--ti-common-size-6x); + --ti-numeric-input-height-mini: var(--ti-common-size-6x, 24px); // mini尺寸按钮宽度 --ti-numeric-input-icon-width-mini: var(--ti-numeric-input-height-mini); // mini尺寸图标大小 - --ti-numeric-input-icon-size-mini: var(--ti-common-font-size-base); + --ti-numeric-input-icon-size-mini: var(--ti-common-font-size-base, 12px); // mini尺寸分割线高度 --ti-numeric-input-divider-height-mini: var(--ti-numeric-input-height-mini); // 单位内容宽度 - --ti-numeric-input-unit-width: calc(var(--ti-common-space-10) * 5); + --ti-numeric-input-unit-width: calc(var(--ti-common-space-10, 10px) * 5); // 单位字体色 - --ti-numeric-input-unit-text-color: var(--ti-common-color-text-secondary); + --ti-numeric-input-unit-text-color: var(--ti-common-color-text-secondary, #575d6c); // 单位字号 - --ti-numeric-input-unit-font-size: var(--ti-common-font-size-base); + --ti-numeric-input-unit-font-size: var(--ti-common-font-size-base, 12px); // 单位左边框颜色 - --ti-numeric-input-unit-border-left-color: var(--ti-common-color-line-dividing); + --ti-numeric-input-unit-border-left-color: var(--ti-common-color-line-dividing, #dfe1e6); // 单位背景色 - --ti-numeric-input-unit-bg-color: var(--ti-common-color-bg-gray); + --ti-numeric-input-unit-bg-color: var(--ti-common-color-bg-gray, #fafafa); } diff --git a/packages/theme/src/option-group/vars.less b/packages/theme/src/option-group/vars.less index 5bce3e2e7..e90092134 100644 --- a/packages/theme/src/option-group/vars.less +++ b/packages/theme/src/option-group/vars.less @@ -12,19 +12,19 @@ .component-css-vars-option-group() { // 分组分割线填充色 - --ti-option-group-line-dividing-bg-color: var(--ti-common-color-line-dividing); + --ti-option-group-line-dividing-bg-color: var(--ti-common-color-line-dividing, #dfe1e6); // 分组标题字号 - --ti-option-group-title-font-size: var(--ti-common-font-size-base); + --ti-option-group-title-font-size: var(--ti-common-font-size-base, 12px); // 分组标题字体颜色 - --ti-option-group-title-text-color: var(--ti-common-color-text-secondary); + --ti-option-group-title-text-color: var(--ti-common-color-text-secondary, #575d6c); // 分组标题行高 - --ti-option-group-title-line-height: var(--ti-common-line-height-number); + --ti-option-group-title-line-height: var(--ti-common-line-height-number, 1.5); // 分组标题水平方向外边距 - --ti-option-group-title-padding-horizontal: var(--ti-common-space-10); + --ti-option-group-title-padding-horizontal: var(--ti-common-space-10, 10px); // 分组标题顶部外边距 - --ti-option-group-title-margin-top: var(--ti-common-space-2x); + --ti-option-group-title-margin-top: var(--ti-common-space-2x, 8px); // 分组分割线高度 - --ti-option-group-line-dividing-height: var(--ti-common-size-0); + --ti-option-group-line-dividing-height: var(--ti-common-size-0, 0px); // 分组底部内边距 - --ti-option-group-padding-bottom: var(--ti-common-space-0); + --ti-option-group-padding-bottom: var(--ti-common-space-0, 0px); } diff --git a/packages/theme/src/option/vars.less b/packages/theme/src/option/vars.less index 818fc45b9..0e8674db7 100644 --- a/packages/theme/src/option/vars.less +++ b/packages/theme/src/option/vars.less @@ -12,47 +12,47 @@ .component-css-vars-option() { // 选择器下拉选项文本色 - --ti-option-text-color: var(--ti-common-color-info-normal); + --ti-option-text-color: var(--ti-common-color-info-normal, #252b3a); // 选择器下拉选项字号 - --ti-option-font-size: var(--ti-common-font-size-base); + --ti-option-font-size: var(--ti-common-font-size-base, 12px); // 选择器下拉选项高度 --ti-option-height: 30px; // 选择器下拉选项行高 - --ti-option-line-height: var(--ti-common-line-height-number); + --ti-option-line-height: var(--ti-common-line-height-number, 1.5); // 选择器下拉选项禁用色 - --ti-option-disabled-text-color: var(--ti-common-color-text-disabled); + --ti-option-disabled-text-color: var(--ti-common-color-text-disabled, #adb0b8); // 选择器下拉选项圆角 - --ti-option-border-radius: var(--ti-common-border-radius-normal); + --ti-option-border-radius: var(--ti-common-border-radius-normal, 2px); // 选择器下拉选项禁用背景色 - --ti-option-disabled-bg-color: var(--ti-common-color-light); + --ti-option-disabled-bg-color: var(--ti-common-color-light, #fff); // 选择器下拉选项背景色 - --ti-option-bg-color-selected: var(--ti-common-color-light); + --ti-option-bg-color-selected: var(--ti-common-color-light, #fff); // 选择器下拉选项悬浮背景色 - --ti-option-hover-bg-color: var(--ti-common-color-hover-background); + --ti-option-hover-bg-color: var(--ti-common-color-hover-background, #f2f5fc); // 选择器下拉选项选中项背景色 - --ti-option-hover-bg-color-selected: var(--ti-common-color-hover-background); + --ti-option-hover-bg-color-selected: var(--ti-common-color-hover-background, #f2f5fc); // 选择器下拉已选项悬浮背景色 - --ti-option-selected-bg-color-hover: var(--ti-common-color-selected-background); + --ti-option-selected-bg-color-hover: var(--ti-common-color-selected-background, #5e7ce0); // 选择器下拉选项选中背景色 - --ti-option-selected-bg-color: var(--ti-common-color-selected-background); + --ti-option-selected-bg-color: var(--ti-common-color-selected-background, #5e7ce0); // 选择器下拉选项选中字重 - --ti-option-selected-font-weight: var(--ti-common-font-weight-4); + --ti-option-selected-font-weight: var(--ti-common-font-weight-4, normal); // 选择下拉框选项已选色 - --ti-option-selected-text-color: var(--ti-common-color-selected-text-color); + --ti-option-selected-text-color: var(--ti-common-color-selected-text-color, #fff); // 选择器下拉选项复选框悬浮色 - --ti-option-checkbox-border-color-hover: var(--ti-common-color-line-normal); + --ti-option-checkbox-border-color-hover: var(--ti-common-color-line-normal, #adb0b8); // 选择器下拉选项复选框悬浮色 - --ti-option-checkbox-all-select-border-color-hover: var(--ti-common-color-line-normal); + --ti-option-checkbox-all-select-border-color-hover: var(--ti-common-color-line-normal, #adb0b8); // 选择器选中下拉选项图标和文本色 - --ti-option-icon-color-selected: var(--ti-common-color-selected-background); + --ti-option-icon-color-selected: var(--ti-common-color-selected-background, #5e7ce0); // 选择下拉框选项垂直内边距 - --ti-option-padding-vertical: var(--ti-common-space-0); + --ti-option-padding-vertical: var(--ti-common-space-0, 0px); // 选择下拉框选项水平内边距 - --ti-option-padding-horizontal: var(--ti-common-space-10); + --ti-option-padding-horizontal: var(--ti-common-space-10, 10px); // 选择下拉框选项顶部外边距 - --ti-option-margin-top: var(--ti-common-size-0); + --ti-option-margin-top: var(--ti-common-size-0, 0px); // 选择器下拉选项高亮文本色 - --ti-option-highlight-text-color: var(--ti-common-color-text-highlight); + --ti-option-highlight-text-color: var(--ti-common-color-text-highlight, #526ecc); // 选择器下拉选项已选项高亮文本色 - --ti-option-highlight-selected-text-color: var(--ti-common-color-text-white); + --ti-option-highlight-selected-text-color: var(--ti-common-color-text-white, #fff); } \ No newline at end of file diff --git a/packages/theme/src/pager/vars.less b/packages/theme/src/pager/vars.less index 53824bb6f..71cb21a5e 100644 --- a/packages/theme/src/pager/vars.less +++ b/packages/theme/src/pager/vars.less @@ -12,96 +12,96 @@ .component-css-vars-pager() { // 分页默认文本色(不含前往按钮|页码项) - --ti-pager-normal-text-color: var(--ti-common-color-info-normal); + --ti-pager-normal-text-color: var(--ti-common-color-info-normal, #252b3a); // 分页页码选中项背景色 - --ti-pager-primary-bg-color: var(--ti-common-color-primary-normal); + --ti-pager-primary-bg-color: var(--ti-common-color-primary-normal, #5e7ce0); // 分页页码选中项文字色 - --ti-pager-active-font-color: var(--ti-common-color-text-white); + --ti-pager-active-font-color: var(--ti-common-color-text-white, #fff); // 分页页码选中项背景色 - --ti-pager-active-bg-color: var(--ti-common-color-primary-normal); + --ti-pager-active-bg-color: var(--ti-common-color-primary-normal, #5e7ce0); // 自定义上下页按钮文本色 - --ti-pager-primary-text-color: var(--ti-common-color-text-link); + --ti-pager-primary-text-color: var(--ti-common-color-text-link, #526ecc); // 分页跳转输入框激活颜色 - --ti-pager-primary-border-color: var(--ti-common-color-line-active); + --ti-pager-primary-border-color: var(--ti-common-color-line-active, #5e7ce0); // 分页主色调悬浮色 - --ti-pager-primary-hover-text-color: var(--ti-common-color-primary-hover); + --ti-pager-primary-hover-text-color: var(--ti-common-color-primary-hover, #7693f5); // 分页页码选中字重 --ti-pager-active-font-weight: var(--ti-common-font-weight-normal); // 分页禁用状态下字体颜色 - --ti-pager-disabled-text-color: var(--ti-common-color-text-weaken); + --ti-pager-disabled-text-color: var(--ti-common-color-text-weaken, #8a8e99); // 分页禁用状态下边框颜色 - --ti-pager-disabled-border-color: var(--ti-common-color-line-disabled); + --ti-pager-disabled-border-color: var(--ti-common-color-line-disabled, #dfe1e6); // 分页输入框和选项框边框色 - --ti-pager-input-border-color: var(--ti-common-color-border); + --ti-pager-input-border-color: var(--ti-common-color-border, #adb0b8); // 分页输入框和选择框悬浮边框色 - --ti-pager-input-hover-border-color: var(--ti-common-color-line-hover); + --ti-pager-input-hover-border-color: var(--ti-common-color-line-hover, #575d6c); // 分页输入框渐变结束点色值 - --ti-pager-input-stop-color: var(--ti-common-color-line-normal); + --ti-pager-input-stop-color: var(--ti-common-color-line-normal, #adb0b8); // 分页输入框 光源的色 - --ti-pager-input-lighting-color: var(--ti-common-color-line-active); + --ti-pager-input-lighting-color: var(--ti-common-color-line-active, #5e7ce0); // 分页输入框圆角 - --ti-pager-input-border-radius: var(--ti-common-border-radius-normal); + --ti-pager-input-border-radius: var(--ti-common-border-radius-normal, 2px); // 分页选择框|输入框|前往按钮高度 - --ti-pager-input-height: var(--ti-common-size-height-mini); + --ti-pager-input-height: var(--ti-common-size-height-mini, 24px); // 分页输入框纵向内边距 --ti-pager-input-padding-vertical: 10px; // 分页字号(不含总条数项) - --ti-pager-font-size: var(--ti-common-font-size-base); + --ti-pager-font-size: var(--ti-common-font-size-base, 12px); // 分页前往按钮|页码项文本色 - --ti-pager-text-color: var(--ti-common-color-text-secondary); + --ti-pager-text-color: var(--ti-common-color-text-secondary, #575d6c); // 分页下拉框按钮图标色 - --ti-pager-normal-icon-color: var(--ti-common-color-icon-normal); + --ti-pager-normal-icon-color: var(--ti-common-color-icon-normal, #575d6c); // 分页页码项高度 - --ti-pager-height: var(--ti-common-size-height-mini); + --ti-pager-height: var(--ti-common-size-height-mini, 24px); // 分页页码项宽度 --ti-pager-width: auto; // 分页页码项最小宽度 --ti-pager-min-width: auto; // 分页输入框宽度 - --ti-pager-input-width: var(--ti-common-space-10x); + --ti-pager-input-width: var(--ti-common-space-10x, 40px); // 分页页码项垂直内边距 - --ti-pager-poplist-item-padding-vertical: var(--ti-common-space-0); + --ti-pager-poplist-item-padding-vertical: var(--ti-common-space-0, 0px); // 分页页码项水平内边距 - --ti-pager-poplist-item-padding-horizontal: var(--ti-common-space-6); + --ti-pager-poplist-item-padding-horizontal: var(--ti-common-space-6, 6px); // 分页未选中页码项悬浮阴影 --ti-pager-poplist-item-unchecked-box-shadow: none; // 分页项圆角 - --ti-pager-li-border-radius: var(--ti-common-border-radius-normal); + --ti-pager-li-border-radius: var(--ti-common-border-radius-normal, 2px); // 分页项边框颜色 - --ti-pager-li-border-color: var(--ti-common-color-transparent); + --ti-pager-li-border-color: var(--ti-common-color-transparent, transparent); // 分页项悬浮颜色 - --ti-pager-li-item-hover-text-color: var(--ti-common-color-text-highlight); + --ti-pager-li-item-hover-text-color: var(--ti-common-color-text-highlight, #526ecc); // 分页项悬浮字重 --ti-pager-li-item-hover-font-weight: var(--ti-common-font-weight-normal); // 分页项默认悬浮背景色 - --ti-pager-poplist-item-hover-bg-color: var(--ti-common-color-hover-background); + --ti-pager-poplist-item-hover-bg-color: var(--ti-common-color-hover-background, #f2f5fc); // 分页下拉框项|列表项悬浮文本色 - --ti-pager-poplist-item-hover-text-color: var(--ti-common-color-text-highlight); + --ti-pager-poplist-item-hover-text-color: var(--ti-common-color-text-highlight, #526ecc); // 分页下拉框选中项默认背景色 - --ti-pager-poplist-item-selected-bg-color: var(--ti-common-color-selected-background); + --ti-pager-poplist-item-selected-bg-color: var(--ti-common-color-selected-background, #5e7ce0); // 分页下拉框项选中字体颜色 - --ti-pager-poplist-item-selected-text-color: var(--ti-common-color-selected-text-color); + --ti-pager-poplist-item-selected-text-color: var(--ti-common-color-selected-text-color, #fff); // 分页页码项默认悬浮边框色 - --ti-pager-poplist-item-hover-border-color: var(--ti-common-color-transparent); + --ti-pager-poplist-item-hover-border-color: var(--ti-common-color-transparent, transparent); // 分页下拉框圆角 - --ti-pager-pop-body-border-radius: var(--ti-common-border-radius-normal); + --ti-pager-pop-body-border-radius: var(--ti-common-border-radius-normal, 2px); // 分页下拉框顶部外边距 --ti-pager-pop-body-margin-top: 4px; // 分页下拉项最小高度 --ti-pager-poplist-item-min-height: 30px; // 分页下一页文字禁用色 - --ti-pager-prev-next-text-color-disabled: var(--ti-common-color-text-disabled); + --ti-pager-prev-next-text-color-disabled: var(--ti-common-color-text-disabled, #adb0b8); // 分页跳转输入框文字颜色 - --ti-pager-goto-text-color: var(--ti-common-color-text-secondary); + --ti-pager-goto-text-color: var(--ti-common-color-text-secondary, #575d6c); // 分页跳转输入框边框悬浮颜色 - --ti-pager-goto-btn-border-hover-color: var(--ti-common-color-border-hover); + --ti-pager-goto-btn-border-hover-color: var(--ti-common-color-border-hover, #575d6c); // 分页跳转输入框文字颜色 - --ti-pager-goto-btn-text-hover-color: var(--ti-common-color-text-highlight); + --ti-pager-goto-btn-text-hover-color: var(--ti-common-color-text-highlight, #526ecc); // 分页上一页左侧内边距 --ti-pager-prev-padding-left: 6px; // 分页上一页右侧内边距 @@ -117,7 +117,7 @@ // 分页下一页左侧外边距 --ti-pager-next-margin-left: 6px; // 分页上一页和下一页图标填充 - --ti-pager-btn-svg-fill-color: var(--ti-common-color-info-normal); + --ti-pager-btn-svg-fill-color: var(--ti-common-color-info-normal, #252b3a); // 分页总条数字体大小 --ti-pager-total-font-size: 12px; @@ -126,7 +126,7 @@ // 分页总条数行高 --ti-pager-total-line-height: 24px; // 分页总条数图标填充色 - --ti-pager-total-svg-fill-color: var(--ti-common-color-info-normal); + --ti-pager-total-svg-fill-color: var(--ti-common-color-info-normal, #252b3a); // 分页图标大小 --ti-pager-svg-font-size: var(--ti-pager-font-size); @@ -136,13 +136,13 @@ --ti-pager-dot-before-display: none; // 分页前进和后退按钮悬浮背景色 - --ti-pager-prev-next-hover-bg-color: var(--ti-common-color-hover-background); + --ti-pager-prev-next-hover-bg-color: var(--ti-common-color-hover-background, #f2f5fc); // 分页页码项右侧外边距 --ti-pager-group-sizes-margin-right: 16px; // 分页页码选项框宽度 --ti-pager-sizes-input-width: 78px; // 分页选择框悬浮文本色 - --ti-pager-sizes-input-hover-text-color: var(--ti-common-color-info-normal); + --ti-pager-sizes-input-hover-text-color: var(--ti-common-color-info-normal, #252b3a); // 分页选择框右侧下拉按钮 --ti-pager-input-btn-width: 24px; // 分页选择框右侧下拉按钮右距离 diff --git a/packages/theme/src/pbi/vars.less b/packages/theme/src/pbi/vars.less index 714880a5f..1c79c2160 100644 --- a/packages/theme/src/pbi/vars.less +++ b/packages/theme/src/pbi/vars.less @@ -11,7 +11,7 @@ */ .component-css-vars-pbi() { - --ti-pbi-font-size-base: var(--ti-common-font-size-base); + --ti-pbi-font-size-base: var(--ti-common-font-size-base, 12px); --ti-pbi-selected-text-color: rgb(19, 143, 199); --ti-pbi-selected-bg-color: rgba(31, 158, 216, 0.12); --ti-pbi-list-border-color: #ccc; diff --git a/packages/theme/src/pop-upload/vars.less b/packages/theme/src/pop-upload/vars.less index 719e13886..a84258203 100644 --- a/packages/theme/src/pop-upload/vars.less +++ b/packages/theme/src/pop-upload/vars.less @@ -12,51 +12,51 @@ .component-css-vars-pop-upload() { // 上传按钮文字大小(hide) - --ti-popupload-font-size: var(--ti-common-font-size-base); + --ti-popupload-font-size: var(--ti-common-font-size-base, 12px); // 弹出框头部alert提示底部外边距 - --ti-popupload-dialog-header-alert-margin-bottom: var(--ti-common-space-10); + --ti-popupload-dialog-header-alert-margin-bottom: var(--ti-common-space-10, 10px); // 弹出框表格高度 - --ti-popupload-dialog-table-height: calc(var(--ti-common-size-35x) * 2); + --ti-popupload-dialog-table-height: calc(var(--ti-common-size-35x, 140px) * 2); // 弹出框表格字号 - --ti-popupload-dialog-table-font-size: var(--ti-common-font-size-1); + --ti-popupload-dialog-table-font-size: var(--ti-common-font-size-1, 14px); // 弹出框表格顶部外边距 - --ti-popupload-dialog-margin-top: var(--ti-common-space-10); + --ti-popupload-dialog-margin-top: var(--ti-common-space-10, 10px); // 弹出框表格头部分割线颜色 - --ti-popupload-dialog-table-border-color: var(--ti-common-color-line-normal); + --ti-popupload-dialog-table-border-color: var(--ti-common-color-line-normal, #adb0b8); // 弹出框表格头部高度 - --ti-popupload-dialog-table-header-height: var(--ti-common-size-height-small); + --ti-popupload-dialog-table-header-height: var(--ti-common-size-height-small, 32px); // 弹出框表格头部文本色 - --ti-popupload-dialog-table-header-text-color: var(--ti-common-color-text-primary); + --ti-popupload-dialog-table-header-text-color: var(--ti-common-color-text-primary, #252b3a); // 弹出框表格头部字重 - --ti-popupload-dialog-table-header-font-weight: var(--ti-common-font-weight-bold); + --ti-popupload-dialog-table-header-font-weight: var(--ti-common-font-weight-bold, 700); // 弹出框表格头部背景色 - --ti-popupload-dialog-table-header-bg-color: var(--ti-common-color-bg-normal); + --ti-popupload-dialog-table-header-bg-color: var(--ti-common-color-bg-normal, #eef0f5); // 弹出框表格头部item垂直内边距 - --ti-popupload-table-header-col-padding-vertical: var(--ti-common-space-0); + --ti-popupload-table-header-col-padding-vertical: var(--ti-common-space-0, 0px); // 弹出框表格头部item水平内边距 - --ti-popupload-table-header-col-padding-horizontal: var(--ti-common-space-3x); + --ti-popupload-table-header-col-padding-horizontal: var(--ti-common-space-3x, 12px); // 弹出框表格内容item垂直内边距 - --ti-popupload-table-body-col-padding-vertical: var(--ti-common-space-2x); + --ti-popupload-table-body-col-padding-vertical: var(--ti-common-space-2x, 8px); // 弹出框表格内容item水平内边距 - --ti-popupload-table-body-col-padding-horizontal: var(--ti-common-space-3x); + --ti-popupload-table-body-col-padding-horizontal: var(--ti-common-space-3x, 12px); // 弹出框表格内容item垂直外边距 - --ti-popupload-table-body-col-margin-vertical: var(--ti-common-space-0); + --ti-popupload-table-body-col-margin-vertical: var(--ti-common-space-0, 0px); // 弹出框表格内容item水平外边距 - --ti-popupload-table-body-col-margin-horizontal: var(--ti-common-space-0); + --ti-popupload-table-body-col-margin-horizontal: var(--ti-common-space-0, 0px); // 弹出框表格内容item行高 - --ti-popupload-table-body-col-line-height: var(--ti-common-line-height-4); + --ti-popupload-table-body-col-line-height: var(--ti-common-line-height-4, 20px); // 弹出框表格内容偶数行背景色 - --ti-popupload-table-item-even-bg-color: var(--ti-common-color-info-bg); + --ti-popupload-table-item-even-bg-color: var(--ti-common-color-info-bg, rgba(51, 51, 51, 0.06)); // 弹出框表格底部内边距 - --ti-popupload-dialog-table-body-padding-bottom: var(--ti-common-space-10); + --ti-popupload-dialog-table-body-padding-bottom: var(--ti-common-space-10, 10px); // 弹出框底部内边距 - --ti-popupload-dialog-footer-padding-bottom: var(--ti-common-space-6x); + --ti-popupload-dialog-footer-padding-bottom: var(--ti-common-space-6x, 24px); // 弹出框已上传文件的删除图标色 - --ti-popupload-dialog-table-icon-color: var(--ti-common-color-icon-active); + --ti-popupload-dialog-table-icon-color: var(--ti-common-color-icon-active, #5e7ce0); // 弹出框已上传文件的删除图标尺寸 - --ti-popupload-dialog-table-icon-size: var(--ti-common-size-4x); + --ti-popupload-dialog-table-icon-size: var(--ti-common-size-4x, 16px); // 弹出框已上传文件的删除图标悬浮色 - --ti-popupload-dialog-table-icon-color-hover: var(--ti-common-bg-primary); + --ti-popupload-dialog-table-icon-color-hover: var(--ti-common-bg-primary, #c7000b); // 弹出框已上传文件的删除图标悬浮尺寸 - --ti-popupload-dialog-table-icon-size-hover: var(--ti-common-size-4x); + --ti-popupload-dialog-table-icon-size-hover: var(--ti-common-size-4x, 16px); } diff --git a/packages/theme/src/popconfirm/vars.less b/packages/theme/src/popconfirm/vars.less index f608a2863..ddf2068b9 100644 --- a/packages/theme/src/popconfirm/vars.less +++ b/packages/theme/src/popconfirm/vars.less @@ -12,19 +12,19 @@ .component-css-vars-popconfirm() { // 提示弹窗字体行高 - --ti-popconfirm-popover-line-height: var(--ti-common-size-6x); + --ti-popconfirm-popover-line-height: var(--ti-common-size-6x, 24px); // 底部按钮flex排列方式 --ti-popconfirm-popover-footer-justify-content: flex-end; // 提示弹窗字体大小 - --ti-popconfirm-popover-footer-font-size: var(--ti-common-font-size-base); + --ti-popconfirm-popover-footer-font-size: var(--ti-common-font-size-base, 12px); // 提示弹窗字体颜色 --ti-popconfirm-popover-footer-font-color: #161e26; // 提示弹窗容器垂直内边距 - --ti-popconfirm-popover-container-padding-vertical: var(--ti-common-space-base); + --ti-popconfirm-popover-container-padding-vertical: var(--ti-common-space-base, 4px); // 提示弹窗图标大小 - --ti-popconfirm-popover-icon-width: var(--ti-common-size-6x); + --ti-popconfirm-popover-icon-width: var(--ti-common-size-6x, 24px); // 提示弹窗图标上侧外边距 - --ti-popconfirm-popover-icon-margin-top: var(--ti-common-space-2x); + --ti-popconfirm-popover-icon-margin-top: var(--ti-common-space-2x, 8px); // 提示弹窗底部按钮容器上侧外边距 - --ti-popconfirm-popover-footer-margin-top: var(--ti-common-space-4x); + --ti-popconfirm-popover-footer-margin-top: var(--ti-common-space-4x, 16px); } diff --git a/packages/theme/src/popeditor/vars.less b/packages/theme/src/popeditor/vars.less index 46260325b..2f1ef3bea 100644 --- a/packages/theme/src/popeditor/vars.less +++ b/packages/theme/src/popeditor/vars.less @@ -12,47 +12,47 @@ .component-css-vars-popeditor() { // 弹出框标题底部边框色和输入框边框色 - --ti-popeditor-border-color: var(--ti-common-color-border); + --ti-popeditor-border-color: var(--ti-common-color-border, #adb0b8); // 输入框左内边距 - --ti-popeditor-input-padding-left: var(--ti-common-space-2x); + --ti-popeditor-input-padding-left: var(--ti-common-space-2x, 8px); // 输入框右侧默认图标色 - --ti-popeditor-icon-color: var(--ti-common-color-icon-active); + --ti-popeditor-icon-color: var(--ti-common-color-icon-active, #5e7ce0); // 输入框右侧禁用图标色 - --ti-popeditor-icon-color-disabled: var(--ti-common-color-placeholder); + --ti-popeditor-icon-color-disabled: var(--ti-common-color-placeholder, #adb0b8); // 输入框右侧默认图标悬浮色 - --ti-popeditor-icon-color-hover: var(--ti-common-color-primary-hover); + --ti-popeditor-icon-color-hover: var(--ti-common-color-primary-hover, #7693f5); // 输入框右侧默认图标字号 - --ti-popeditor-icon-font-size: var(--ti-common-font-size-1); + --ti-popeditor-icon-font-size: var(--ti-common-font-size-1, 14px); // 输入框右侧默认图标高度 - --ti-popeditor-icon-height: var(--ti-common-size-height-normal); + --ti-popeditor-icon-height: var(--ti-common-size-height-normal, 28px); // 输入框右侧默认图标行高 --ti-popeditor-icon-line-height: var(--ti-popeditor-icon-height); // 弹出框头部标题选中文本色和边框色 - --ti-popeditor-tabs-selected-text-color: var(--ti-common-color-line-active); + --ti-popeditor-tabs-selected-text-color: var(--ti-common-color-line-active, #5e7ce0); // 弹出框头部标题高度 - --ti-popeditor-tabs-li-height: var(--ti-common-size-10x); + --ti-popeditor-tabs-li-height: var(--ti-common-size-10x, 40px); // 弹出框头部标题选中文本字重 - --ti-popeditor-tabs-selected-font-weight: var(--ti-common-font-weight-bold); + --ti-popeditor-tabs-selected-font-weight: var(--ti-common-font-weight-bold, 700); // 弹出框查询条件item底部外边距 - --ti-popeditor-search-item-margin-bottom: var(--ti-common-space-3x); + --ti-popeditor-search-item-margin-bottom: var(--ti-common-space-3x, 12px); // 弹出框查询条件页脚垂直外边距 - --ti-popeditor-search-footer-margin-vertical: var(--ti-common-space-3x); + --ti-popeditor-search-footer-margin-vertical: var(--ti-common-space-3x, 12px); // 弹出框查询条件页脚水平外边距 --ti-popeditor-search-footer-margin-horizontal: auto; // 弹出编辑头部标签页文本色(hide) - --ti-popeditor-tabs-text-color: var(--ti-common-color-info-normal); + --ti-popeditor-tabs-text-color: var(--ti-common-color-info-normal, #252b3a); // 弹出表格头部标签页item垂直内边距 - --ti-popeditor-tabs-li-padding-vertical: var(--ti-common-space-0); + --ti-popeditor-tabs-li-padding-vertical: var(--ti-common-space-0, 0px); // 弹出表格头部标签页item水平内边距 - --ti-popeditor-tabs-li-padding-horizontal: var(--ti-common-space-5x); + --ti-popeditor-tabs-li-padding-horizontal: var(--ti-common-space-5x, 20px); // 弹出框表格垂直内边距 - --ti-popeditor-tabs-body-padding-vertical: var(--ti-common-space-0); + --ti-popeditor-tabs-body-padding-vertical: var(--ti-common-space-0, 0px); // 弹出框表格水平内边距 - --ti-popeditor-tabs-body-padding-horizontal: var(--ti-common-space-base); + --ti-popeditor-tabs-body-padding-horizontal: var(--ti-common-space-base, 4px); // 弹出表格内容顶部内边距 - --ti-popeditor-tabs-body-item-padding-top: var(--ti-common-space-3x); + --ti-popeditor-tabs-body-item-padding-top: var(--ti-common-space-3x, 12px); // 弹出表格内容水平内边距 - --ti-popeditor-tabs-body-item-padding-horizontal: var(--ti-common-space-3x); + --ti-popeditor-tabs-body-item-padding-horizontal: var(--ti-common-space-3x, 12px); // 弹出表格内容底部内边距 - --ti-popeditor-tabs-body-item-padding-bottom: var(--ti-common-space-0); + --ti-popeditor-tabs-body-item-padding-bottom: var(--ti-common-space-0, 0px); } diff --git a/packages/theme/src/popover/vars.less b/packages/theme/src/popover/vars.less index 272efa471..37fc857a9 100644 --- a/packages/theme/src/popover/vars.less +++ b/packages/theme/src/popover/vars.less @@ -12,39 +12,39 @@ .component-css-vars-popover() { // 弹框字体 - --ti-popover-font-family: var(--ti-common-font-family); + --ti-popover-font-family: var(--ti-common-font-family, 'Helvetica', 'Arial', 'PingFangSC-Regular', 'Hiragino Sans GB', 'Microsoft YaHei', '微软雅黑', 'Microsoft JhengHei'); // 弹框背景色 - --ti-popover-bg-color: var(--ti-common-color-light); + --ti-popover-bg-color: var(--ti-common-color-light, #fff); // 弹框内容文本色 - --ti-popover-text-color: var(--ti-common-color-text-secondary); + --ti-popover-text-color: var(--ti-common-color-text-secondary, #575d6c); // 弹框边框色 - --ti-popover-border-color: var(--ti-common-color-line-dividing); + --ti-popover-border-color: var(--ti-common-color-line-dividing, #dfe1e6); // 弹框圆角 - --ti-popover-border-radius: var(--ti-common-border-radius-1); + --ti-popover-border-radius: var(--ti-common-border-radius-1, 4px); // 弹框内容字号 - --ti-popover-font-size: var(--ti-common-font-size-1); + --ti-popover-font-size: var(--ti-common-font-size-1, 14px); // 弹框内容行高 --ti-popover-line-height: 1.4; // 弹框标题文本色 - --ti-popover-title-text-color: var(--ti-common-color-text-primary); + --ti-popover-title-text-color: var(--ti-common-color-text-primary, #252b3a); // 弹框标题字号 - --ti-popover-title-font-size: var(--ti-common-font-size-2); + --ti-popover-title-font-size: var(--ti-common-font-size-2, 16px); // 弹出框小箭头边框厚度 - --ti-popover-arrow-border-width: calc(var(--ti-common-border-weight-2) * 2); + --ti-popover-arrow-border-width: calc(var(--ti-common-border-weight-2, 3px) * 2); // 弹出框小箭头高度 --ti-popover-arrow-height: var(--ti-popover-arrow-border-width); // 弹出框垂直外边距 - --ti-popover-placement-margin-vertical: var(--ti-common-space-3x); + --ti-popover-placement-margin-vertical: var(--ti-common-space-3x, 12px); // 弹出框小箭头水平外边距(hide) - --ti-popover-placement-margin-horizontal: var(--ti-common-space-3x); + --ti-popover-placement-margin-horizontal: var(--ti-common-space-3x, 12px); // 弹框小箭头填充色 - --ti-popover-placement-arrow-after-border-color: var(--ti-common-color-light); + --ti-popover-placement-arrow-after-border-color: var(--ti-common-color-light, #fff); // 弹框阴影 - --ti-popover-box-shadow: var(--ti-common-shadow-1-down); + --ti-popover-box-shadow: var(--ti-common-shadow-1-down, 0 1px 4px 0 rgba(0, 0, 0, 0.1)); // 弹框小箭头边框色 - --ti-popover-arrow-border-color: var(--ti-common-color-line-dividing); + --ti-popover-arrow-border-color: var(--ti-common-color-line-dividing, #dfe1e6); // 弹框垂直内边距 - --ti-popover-padding-vertical: var(--ti-common-space-3x); + --ti-popover-padding-vertical: var(--ti-common-space-3x, 12px); // 弹框水平内边距 - --ti-popover-padding-horizontal: var(--ti-common-space-4x); + --ti-popover-padding-horizontal: var(--ti-common-space-4x, 16px); } diff --git a/packages/theme/src/progress/vars.less b/packages/theme/src/progress/vars.less index ce5cf6f8a..0b81f8f46 100644 --- a/packages/theme/src/progress/vars.less +++ b/packages/theme/src/progress/vars.less @@ -12,21 +12,21 @@ .component-css-vars-progress() { // 进度条默认文本色 - --ti-progress-text-color: var(--ti-common-color-text-primary); + --ti-progress-text-color: var(--ti-common-color-text-primary, #252b3a); // 进度条内层文本字号 - --ti-progress-text-font-size: var(--ti-common-font-size-base); + --ti-progress-text-font-size: var(--ti-common-font-size-base, 12px); // 横向条未完成部分背景色 - --ti-progress-bar-outer-bg-color: var(--ti-common-color-bg-disabled); + --ti-progress-bar-outer-bg-color: var(--ti-common-color-bg-disabled, #f5f5f6); // 横向条已完成部分背景色 - --ti-progress-bar-inner-bg-color: var(--ti-common-color-bg-emphasize); + --ti-progress-bar-inner-bg-color: var(--ti-common-color-bg-emphasize, #5e7ce0); // 横向条内层文本色 - --ti-progress-bar-inner-text-color: var(--ti-common-color-light); + --ti-progress-bar-inner-text-color: var(--ti-common-color-light, #fff); // 横向条右侧文字左外边距 - --ti-progress-bar-text-margin-left: var(--ti-common-space-2x); + --ti-progress-bar-text-margin-left: var(--ti-common-space-2x, 8px); // success状态横向条已完成部分背景色 - --ti-progress-success-bg-color: var(--ti-common-color-success-normal); + --ti-progress-success-bg-color: var(--ti-common-color-success-normal, #50d4ab); // warning状态横向条已完成部分背景色 - --ti-progress-warning-bg-color: var(--ti-common-color-warning-normal); + --ti-progress-warning-bg-color: var(--ti-common-color-warning-normal, #fa9841); // exception状态横向条已完成部分背景色 - --ti-progress-exception-bg-color: var(--ti-common-bg-primary); + --ti-progress-exception-bg-color: var(--ti-common-bg-primary, #c7000b); } diff --git a/packages/theme/src/radio-button/vars.less b/packages/theme/src/radio-button/vars.less index db562d516..b99d18961 100644 --- a/packages/theme/src/radio-button/vars.less +++ b/packages/theme/src/radio-button/vars.less @@ -11,19 +11,19 @@ */ .component-css-vars-radio-button() { - --ti-radio-button-text-color: var(--ti-common-color-info-normal); - --ti-radio-button-hover-text-color: var(--ti-common-color-light); - --ti-radio-button-border-color: var(--ti-common-color-border); - --ti-radio-button-border-radius: var(--ti-common-border-radius-normal); - --ti-radio-button-font-size: var(--ti-common-font-size-base); - --ti-radio-button-bg-color: var(--ti-common-color-light); - --ti-radio-button-checked-normal-bg-color: var(--ti-base-color-brand-6); - --ti-radio-button-checked-normal-border-color: var(--ti-base-color-brand-6); - --ti-radio-button-checked-normal-box-shadow: -1px 0 0 0 var(--ti-base-color-brand-6); - --ti-radio-button-checked-hover-bg-color: var(--ti-base-color-brand-5); - --ti-radio-button-checked-hover-border-color: var(--ti-base-color-brand-5); - --ti-radio-button-checked-hover-box-shadow: -1px 0 0 0 var(--ti-base-color-brand-5); - --ti-radio-button-disabled-text-color: var(--ti-common-color-text-disabled); - --ti-radio-button-disabled-bg-color: var(--ti-base-color-bg-5); - --ti-radio-button-medium-font-size: var(--ti-common-font-size-1); + --ti-radio-button-text-color: var(--ti-common-color-info-normal, #252b3a); + --ti-radio-button-hover-text-color: var(--ti-common-color-light, #fff); + --ti-radio-button-border-color: var(--ti-common-color-border, #adb0b8); + --ti-radio-button-border-radius: var(--ti-common-border-radius-normal, 2px); + --ti-radio-button-font-size: var(--ti-common-font-size-base, 12px); + --ti-radio-button-bg-color: var(--ti-common-color-light, #fff); + --ti-radio-button-checked-normal-bg-color: var(--ti-base-color-brand-6, #5e7ce0); + --ti-radio-button-checked-normal-border-color: var(--ti-base-color-brand-6, #5e7ce0); + --ti-radio-button-checked-normal-box-shadow: -1px 0 0 0 var(--ti-base-color-brand-6, #5e7ce0); + --ti-radio-button-checked-hover-bg-color: var(--ti-base-color-brand-5, #7693f5); + --ti-radio-button-checked-hover-border-color: var(--ti-base-color-brand-5, #7693f5); + --ti-radio-button-checked-hover-box-shadow: -1px 0 0 0 var(--ti-base-color-brand-5, #7693f5); + --ti-radio-button-disabled-text-color: var(--ti-common-color-text-disabled, #adb0b8); + --ti-radio-button-disabled-bg-color: var(--ti-base-color-bg-5, #f5f5f6); + --ti-radio-button-medium-font-size: var(--ti-common-font-size-1, 14px); } diff --git a/packages/theme/src/radio/vars.less b/packages/theme/src/radio/vars.less index ee518d434..e3d294bb1 100644 --- a/packages/theme/src/radio/vars.less +++ b/packages/theme/src/radio/vars.less @@ -12,81 +12,81 @@ .component-css-vars-radio() { // 单选框默认文本色 - --ti-radio-text-color: var(--ti-common-color-text-primary); + --ti-radio-text-color: var(--ti-common-color-text-primary, #252b3a); // 单选框字号 - --ti-radio-font-size: var(--ti-common-font-size-base); + --ti-radio-font-size: var(--ti-common-font-size-base, 12px); // 带边框类单选框默认高度 - --ti-radio-bordered-height: var(--ti-common-size-10x); + --ti-radio-bordered-height: var(--ti-common-size-10x, 40px); // 带边框类单选框圆角 - --ti-radio-bordered-border-radius: var(--ti-common-border-radius-normal); + --ti-radio-bordered-border-radius: var(--ti-common-border-radius-normal, 2px); // 单选框默认边框色 - --ti-radio-bordered-border-color: var(--ti-common-color-line-normal); + --ti-radio-bordered-border-color: var(--ti-common-color-line-normal, #adb0b8); // 单选框默认禁用边框色 - --ti-radio-input-disabled-border-color: var(--ti-common-color-line-disabled); + --ti-radio-input-disabled-border-color: var(--ti-common-color-line-disabled, #dfe1e6); // 单选框的选中状态时的边框色 - --ti-radio-bordered-checked-border-color: var(--ti-common-color-line-active); + --ti-radio-bordered-checked-border-color: var(--ti-common-color-line-active, #5e7ce0); // 单选框的选中状态时的背景色 - --ti-radio-bordered-checked-background-color: var(--ti-common-color-bg-white-normal); + --ti-radio-bordered-checked-background-color: var(--ti-common-color-bg-white-normal, #fff); // 单选框的带有边框时悬浮时的边框色 - --ti-radio-bordered-hover-border-color: var(--ti-common-color-line-active); + --ti-radio-bordered-hover-border-color: var(--ti-common-color-line-active, #5e7ce0); // 单选框的带有边框时选中时的边框色 - --ti-radio-bordered-checked-hover-border-color: var(--ti-common-color-line-active); + --ti-radio-bordered-checked-hover-border-color: var(--ti-common-color-line-active, #5e7ce0); // 单选框的带有边框时激活时的边框色 - --ti-radio-bordered-active-border-color: var(--ti-common-color-line-active); + --ti-radio-bordered-active-border-color: var(--ti-common-color-line-active, #5e7ce0); // 单选框的禁用状态时的背景色 - --ti-radio-input-disabled-bg-color: var(--ti-common-color-bg-disabled); + --ti-radio-input-disabled-bg-color: var(--ti-common-color-bg-disabled, #f5f5f6); // 单选框为选中且禁用状态时的背景色 - --ti-radio-input-checked-disabled-bg-color: var(--ti-common-color-bg-disabled); + --ti-radio-input-checked-disabled-bg-color: var(--ti-common-color-bg-disabled, #f5f5f6); // 单选框为选中且禁用状态时的边框色 - --ti-radio-input-checked-disabled-border-color: var(--ti-common-color-line-disabled); + --ti-radio-input-checked-disabled-border-color: var(--ti-common-color-line-disabled, #dfe1e6); // 单选框为输入框样式时禁用状态时的文本色 - --ti-radio-input-disabled-text-color: var(--ti-common-color-text-disabled); + --ti-radio-input-disabled-text-color: var(--ti-common-color-text-disabled, #adb0b8); // 单选框单选按钮的背景色 - --ti-radio-inner-bg-color: var(--ti-common-color-bg-white-normal); + --ti-radio-inner-bg-color: var(--ti-common-color-bg-white-normal, #fff); // 单选框单选按钮选中时的背景色 - --ti-radio-inner-checked-bg-color: var(--ti-common-color-bg-emphasize); + --ti-radio-inner-checked-bg-color: var(--ti-common-color-bg-emphasize, #5e7ce0); // 单选框单选按钮的尺寸 - --ti-radio-inner-size: var(--ti-common-size-2x); + --ti-radio-inner-size: var(--ti-common-size-2x, 8px); // 单选框单选按钮为选中且禁用状态时的背景色 - --ti-radio-inner-checked-disabled-bg-color: var(--ti-common-color-bg-secondary); + --ti-radio-inner-checked-disabled-bg-color: var(--ti-common-color-bg-secondary, #adb0b8); // 单选按钮为medium尺寸时的高度 - --ti-radio-medium-height: var(--ti-common-size-height-small); + --ti-radio-medium-height: var(--ti-common-size-height-small, 32px); // 单选框单选按钮为medium尺寸时的高度 - --ti-radio-medium-inner-height: calc(var(--ti-common-size-3x) + 2px); + --ti-radio-medium-inner-height: calc(var(--ti-common-size-3x, 12px) + 2px); // 单选框单选按钮为medium尺寸时的宽度 - --ti-radio-medium-inner-width: calc(var(--ti-common-size-3x) + 2px); + --ti-radio-medium-inner-width: calc(var(--ti-common-size-3x, 12px) + 2px); // 单选按钮为small尺寸时的高度 - --ti-radio-small-height: var(--ti-common-size-8x); + --ti-radio-small-height: var(--ti-common-size-8x, 32px); // 单选框单选按钮为small尺寸时的高度 - --ti-radio-small-inner-height: var(--ti-common-size-3x); + --ti-radio-small-inner-height: var(--ti-common-size-3x, 12px); // 单选框单选按钮为small尺寸时的宽度 - --ti-radio-small-inner-width: var(--ti-common-size-3x); + --ti-radio-small-inner-width: var(--ti-common-size-3x, 12px); // 单选按钮为mini尺寸时的高度 - --ti-radio-mini-height: var(--ti-common-size-7x); + --ti-radio-mini-height: var(--ti-common-size-7x, 28px); // 单选框单选按钮为mini尺寸时的高度 - --ti-radio-mini-inner-height: var(--ti-common-size-3x); + --ti-radio-mini-inner-height: var(--ti-common-size-3x, 12px); // 单选框单选按钮为mini尺寸时的宽度 - --ti-radio-mini-inner-width: var(--ti-common-size-3x); + --ti-radio-mini-inner-width: var(--ti-common-size-3x, 12px); // 单选框单选按钮的边框圆角半径 --ti-radio-inner-border-radius: 100%; // 单选框尺寸为mini时的带有边框时垂直方向的内边距 - --ti-radio-mini-bordered-padding-vertical: var(--ti-common-space-0); + --ti-radio-mini-bordered-padding-vertical: var(--ti-common-space-0, 0px); // 单选框尺寸为mini时的带有边框时水平方向的内边距 - --ti-radio-mini-bordered-padding-horizontal: var(--ti-common-space-2x); + --ti-radio-mini-bordered-padding-horizontal: var(--ti-common-space-2x, 8px); // 单选框的带有边框时垂直方向的内边距 - --ti-radio-bordered-padding-vertical: var(--ti-common-space-base); + --ti-radio-bordered-padding-vertical: var(--ti-common-space-base, 4px); // 单选框的带有边框时水平方向的内边距 - --ti-radio-bordered-padding-horizontal: var(--ti-common-space-3x); + --ti-radio-bordered-padding-horizontal: var(--ti-common-space-3x, 12px); // 单选框的带有边框时左侧的外边距 - --ti-radio-mini-bordered-margin-left: var(--ti-common-space-10); + --ti-radio-mini-bordered-margin-left: var(--ti-common-space-10, 10px); // 单选框单选按钮宽度 - --ti-radio-inner-width: var(--ti-common-size-4x); + --ti-radio-inner-width: var(--ti-common-size-4x, 16px); // 单选框单选按钮宽度 - --ti-radio-inner-height: var(--ti-common-size-4x); + --ti-radio-inner-height: var(--ti-common-size-4x, 16px); // 单选组每个选项之间的间距 - --ti-radio-margin-right: calc(var(--ti-common-space-8x) - 2px); + --ti-radio-margin-right: calc(var(--ti-common-space-8x, 32px) - 2px); // 单选框单选按钮选中后悬浮时的背景色 - --ti-radio-inner-checked-hover-bg-color: var(--ti-common-color-bg-emphasize); + --ti-radio-inner-checked-hover-bg-color: var(--ti-common-color-bg-emphasize, #5e7ce0); // 单选按钮底部外边距 - --ti-radio-button-margin-bottom: var(--ti-common-space-2x); + --ti-radio-button-margin-bottom: var(--ti-common-space-2x, 8px); } diff --git a/packages/theme/src/rate/vars.less b/packages/theme/src/rate/vars.less index 6b66b80a8..84a9c2f01 100644 --- a/packages/theme/src/rate/vars.less +++ b/packages/theme/src/rate/vars.less @@ -12,11 +12,11 @@ .component-css-vars-rate() { // 图标右侧文本左外边距 - --ti-rate-text-margin-left: var(--ti-common-space-3x); + --ti-rate-text-margin-left: var(--ti-common-space-3x, 12px); // 图标右侧文本字号 - --ti-rate-text-font-size: var(--ti-common-font-size-base); + --ti-rate-text-font-size: var(--ti-common-font-size-base, 12px); // 图标下方提示文本字号 - --ti-rate-bottom-font-size: var(--ti-common-font-size-base); + --ti-rate-bottom-font-size: var(--ti-common-font-size-base, 12px); // 图标下方提示文本上外边距 - --ti-rate-bottom-margin-top: var(--ti-common-space-2x); + --ti-rate-bottom-margin-top: var(--ti-common-space-2x, 8px); } diff --git a/packages/theme/src/rich-text-editor/vars.less b/packages/theme/src/rich-text-editor/vars.less index a3ce718d3..ab2525987 100644 --- a/packages/theme/src/rich-text-editor/vars.less +++ b/packages/theme/src/rich-text-editor/vars.less @@ -1,14 +1,14 @@ .component-css-vars-rich-text-editor() { - --ti-rich-text-editor-box-outline-color: var(--ti-common-color-line-normal); - --ti-rich-text-editor-box-outline-hover-color: var(--ti-common-color-line-hover); - --ti-rich-text-editor-button-hover: var(--ti-common-color-icon-hover); - --ti-rich-text-editor-button-active: var(--ti-common-color-icon-active); - --ti-rich-text-editor-button-disabled: var(--ti-common-color-icon-disabled); - --ti-rich-text-editor-poplist-item-selected-bg-color: var(--ti-common-color-selected-background); - --ti-rich-text-editor-poplist-item-selected-text-color: var(--ti-common-color-selected-text-color); - --ti-rich-text-edito-options-bg-color: var(--ti-common-color-bg-white-normal); - --ti-rich-text-edito-options-box-shadow: var(--ti-common-shadow-2-down); - --ti-rich-text-edito-options-border-radius: var(--ti-common-border-radius-normal); - --ti-rich-text-edito-options-item-padding: var(--ti-common-space-6) var(--ti-common-space-5x); - --ti-rich-text-edito-options-item-hover-color: var(--ti-common-color-icon-hover); + --ti-rich-text-editor-box-outline-color: var(--ti-common-color-line-normal, #adb0b8); + --ti-rich-text-editor-box-outline-hover-color: var(--ti-common-color-line-hover, #575d6c); + --ti-rich-text-editor-button-hover: var(--ti-common-color-icon-hover, #5e7ce0); + --ti-rich-text-editor-button-active: var(--ti-common-color-icon-active, #5e7ce0); + --ti-rich-text-editor-button-disabled: var(--ti-common-color-icon-disabled, #adb0b8); + --ti-rich-text-editor-poplist-item-selected-bg-color: var(--ti-common-color-selected-background, #5e7ce0); + --ti-rich-text-editor-poplist-item-selected-text-color: var(--ti-common-color-selected-text-color, #fff); + --ti-rich-text-edito-options-bg-color: var(--ti-common-color-bg-white-normal, #fff); + --ti-rich-text-edito-options-box-shadow: var(--ti-common-shadow-2-down, 0 2px 8px 0 rgba(0, 0, 0, 0.2)); + --ti-rich-text-edito-options-border-radius: var(--ti-common-border-radius-normal, 2px); + --ti-rich-text-edito-options-item-padding: var(--ti-common-space-6, 6px) var(--ti-common-space-5x, 20px); + --ti-rich-text-edito-options-item-hover-color: var(--ti-common-color-icon-hover, #5e7ce0); } diff --git a/packages/theme/src/roles/vars.less b/packages/theme/src/roles/vars.less index 5e58ff066..83f14a1cf 100644 --- a/packages/theme/src/roles/vars.less +++ b/packages/theme/src/roles/vars.less @@ -11,10 +11,10 @@ */ .component-css-vars-roles() { - --ti-roles-poplist-item-height: var(--ti-common-size-height-normal); - --ti-roles-poplist-item-text-color: var(--ti-common-color-info-normal); - --ti-roles-poplist-item-font-size: var(--ti-common-font-size-base); - --ti-roles-poplist-item-hover-bg-color: var(--ti-common-color-hover-background); - --ti-roles-poplist-item-selected-bg-color: var(--ti-common-color-selected-background); - --ti-roles-poplist-item-selected-text-color: var(--ti-common-color-selected-text-color); + --ti-roles-poplist-item-height: var(--ti-common-size-height-normal, 28px); + --ti-roles-poplist-item-text-color: var(--ti-common-color-info-normal, #252b3a); + --ti-roles-poplist-item-font-size: var(--ti-common-font-size-base, 12px); + --ti-roles-poplist-item-hover-bg-color: var(--ti-common-color-hover-background, #f2f5fc); + --ti-roles-poplist-item-selected-bg-color: var(--ti-common-color-selected-background, #5e7ce0); + --ti-roles-poplist-item-selected-text-color: var(--ti-common-color-selected-text-color, #fff); } diff --git a/packages/theme/src/scroll-text/vars.less b/packages/theme/src/scroll-text/vars.less index 0d55957a9..493a1de1d 100644 --- a/packages/theme/src/scroll-text/vars.less +++ b/packages/theme/src/scroll-text/vars.less @@ -11,7 +11,7 @@ */ .component-css-vars-scroll-text() { - --ti-scroll-text-height: var(--ti-common-size-height-small); + --ti-scroll-text-height: var(--ti-common-size-height-small, 32px); --ti-scroll-text-bg-color: #f1f1f1; --ti-scroll-text-margin-vertical: 0; --ti-scroll-text-margin-horizontal: auto; diff --git a/packages/theme/src/search/vars.less b/packages/theme/src/search/vars.less index 21e98144b..241f7936e 100644 --- a/packages/theme/src/search/vars.less +++ b/packages/theme/src/search/vars.less @@ -12,74 +12,74 @@ .component-css-vars-search() { // 搜索框字号 - --ti-search-font-size: var(--ti-common-font-size-base); + --ti-search-font-size: var(--ti-common-font-size-base, 12px); // 搜索框高度 - --ti-search-input-height: var(--ti-common-size-height-normal); + --ti-search-input-height: var(--ti-common-size-height-normal, 28px); // 搜索框左内边距 - --ti-search-input-padding-left: var(--ti-common-space-2x); + --ti-search-input-padding-left: var(--ti-common-space-2x, 8px); // 搜索框边框色 - --ti-search-input-border-color: var(--ti-common-color-line-normal); + --ti-search-input-border-color: var(--ti-common-color-line-normal, #adb0b8); // 搜索框聚焦时边框色 - --ti-search-input-focus-border-color: var(--ti-common-color-line-active); + --ti-search-input-focus-border-color: var(--ti-common-color-line-active, #5e7ce0); // 搜索框圆角 - --ti-search-input-border-radius: var(--ti-common-border-radius-normal); + --ti-search-input-border-radius: var(--ti-common-border-radius-normal, 2px); // 搜索框文本色 - --ti-search-input-text-color: var(--ti-common-color-text-primary); + --ti-search-input-text-color: var(--ti-common-color-text-primary, #252b3a); // 搜索框默认背景色 - --ti-search-input-bg-color: var(--ti-common-color-bg-white-normal); + --ti-search-input-bg-color: var(--ti-common-color-bg-white-normal, #fff); // 搜索框分割线高度 - --ti-search-size-height-normal: var(--ti-common-size-height-normal); + --ti-search-size-height-normal: var(--ti-common-size-height-normal, 28px); // 输入框提示占位文本色 - --ti-search-input-placeholder-color: var(--ti-common-color-placeholder); + --ti-search-input-placeholder-color: var(--ti-common-color-placeholder, #adb0b8); // 搜索按钮图标色 - --ti-search-input-btn-icon-color: var(--ti-common-color-icon-normal); + --ti-search-input-btn-icon-color: var(--ti-common-color-icon-normal, #575d6c); // 搜索按钮悬浮图标色 - --ti-search-input-btn-hover-icon-color: var(--ti-common-color-icon-hover); + --ti-search-input-btn-hover-icon-color: var(--ti-common-color-icon-hover, #5e7ce0); // 搜索按钮图标尺寸 - --ti-search-input-btn-icon-size: var(--ti-common-font-size-1); + --ti-search-input-btn-icon-size: var(--ti-common-font-size-1, 14px); // 搜索按钮宽度(hide) - --ti-search-input-btn-width: var(--ti-common-size-6x); + --ti-search-input-btn-width: var(--ti-common-size-6x, 24px); // 搜索框按钮行高(hide) --ti-search-input-btn-line-height: var(--ti-search-input-height); // 搜索图标边框色(hide) - --ti-search-icon-border-color: var(--ti-common-color-line-normal); + --ti-search-icon-border-color: var(--ti-common-color-line-normal, #adb0b8); // 搜索按钮图标与右边框距离(hide) - --ti-search-input-btn-icon-position-right: var(--ti-common-space-10); + --ti-search-input-btn-icon-position-right: var(--ti-common-space-10, 10px); // 左侧搜索按钮图标右外边距 - --ti-search-input-left-svg-margin-right: var(--ti-common-space-0); + --ti-search-input-left-svg-margin-right: var(--ti-common-space-0, 0px); // 左侧搜索按钮图标左外边距 - --ti-search-input-left-svg-margin-left: var(--ti-common-space-3x); + --ti-search-input-left-svg-margin-left: var(--ti-common-space-3x, 12px); // 迷你模式搜索图标色|下拉箭头图标色 - --ti-search-icon-color: var(--ti-common-color-icon-normal); + --ti-search-icon-color: var(--ti-common-color-icon-normal, #575d6c); // 迷你搜索框宽度 --ti-search-mini-width: var(--ti-search-input-height); // 迷你模式搜索按钮悬浮边框色 - --ti-search-line-hover-border-color: var(--ti-common-color-line-hover); + --ti-search-line-hover-border-color: var(--ti-common-color-line-hover, #575d6c); // 小型搜索框高度(hide) - --ti-search-size-height-small: var(--ti-common-size-height-small); + --ti-search-size-height-small: var(--ti-common-size-height-small, 32px); // 分类搜索宽度 - --ti-search-selector-width: var(--ti-common-size-20x); + --ti-search-selector-width: var(--ti-common-size-20x, 80px); // 下拉按钮和下拉框文本色 - --ti-search-selector-text-color: var(--ti-common-color-text-primary); + --ti-search-selector-text-color: var(--ti-common-color-text-primary, #252b3a); // 搜索下拉框圆角 - --ti-search-selector-border-radius: var(--ti-common-border-radius-normal); + --ti-search-selector-border-radius: var(--ti-common-border-radius-normal, 2px); // 搜索下拉框背景色 - --ti-search-selector-bg-color: var(--ti-common-color-bg-white-normal); + --ti-search-selector-bg-color: var(--ti-common-color-bg-white-normal, #fff); // 搜索下拉框阴影 - --ti-search-selector-box-shadow: var(--ti-common-shadow-2-down); + --ti-search-selector-box-shadow: var(--ti-common-shadow-2-down, 0 2px 8px 0 rgba(0, 0, 0, 0.2)); // 搜索下拉框最小宽度 - --ti-search-selector-box-min-width: var(--ti-common-size-20x); + --ti-search-selector-box-min-width: var(--ti-common-size-20x, 80px); // 搜索下拉框上外边距 - --ti-search-selector-margin-top: var(--ti-common-space-base); + --ti-search-selector-margin-top: var(--ti-common-space-base, 4px); // 搜索下拉框最大高度 - --ti-search-selector-max-height: calc(var(--ti-common-space-10) * 30); + --ti-search-selector-max-height: calc(var(--ti-common-space-10, 10px) * 30); // 搜索下拉框选项高度 - --ti-search-selector-list-height: var(--ti-common-size-height-normal); + --ti-search-selector-list-height: var(--ti-common-size-height-normal, 28px); // 下拉框选项悬浮背景色 - --ti-search-list-hover-bg-color: var(--ti-common-color-hover-background); + --ti-search-list-hover-bg-color: var(--ti-common-color-hover-background, #f2f5fc); // 搜索下拉框选项水平内边距 - --ti-search-selector-list-padding-horizontal: var(--ti-common-space-10); + --ti-search-selector-list-padding-horizontal: var(--ti-common-space-10, 10px); } diff --git a/packages/theme/src/select-dropdown/vars.less b/packages/theme/src/select-dropdown/vars.less index 31d65b9e1..3d82450ad 100644 --- a/packages/theme/src/select-dropdown/vars.less +++ b/packages/theme/src/select-dropdown/vars.less @@ -12,69 +12,69 @@ .component-css-vars-select-dropdown() { // 选择下拉框边框色 - --ti-select-dropdown-border-color: var(--ti-common-color-transparent); + --ti-select-dropdown-border-color: var(--ti-common-color-transparent, transparent); // 选择下拉框边框的粗细 - --ti-select-dropdown-border-weight: var(--ti-common-size-0); + --ti-select-dropdown-border-weight: var(--ti-common-size-0, 0px); // 选择下拉框边框的样式 - --ti-select-dropdown-border-style: var(--ti-common-border-style-solid); + --ti-select-dropdown-border-style: var(--ti-common-border-style-solid, solid); // 选择下拉框边框圆角 - --ti-select-dropdown-border-radius: var(--ti-common-border-radius-normal); + --ti-select-dropdown-border-radius: var(--ti-common-border-radius-normal, 2px); // 选择下拉框背景色 - --ti-select-dropdown-bg-color: var(--ti-common-color-light); + --ti-select-dropdown-bg-color: var(--ti-common-color-light, #fff); // 选择下拉框的阴影 - --ti-select-dropdown-box-shadow: var(--ti-common-shadow-2-down); + --ti-select-dropdown-box-shadow: var(--ti-common-shadow-2-down, 0 2px 8px 0 rgba(0, 0, 0, 0.2)); // 选择下拉框的顶部外边距 - --ti-select-dropdown-margin-top: var(--ti-common-dropdown-gap); + --ti-select-dropdown-margin-top: var(--ti-common-dropdown-gap, 2px); // 下拉面板的最大高度 --ti-select-dropdown-max-height: calc(248px - var(--ti-select-dropdown-padding-top) - var(--ti-select-dropdown-padding-bottom) + var(--ti-common-space-base)); // 远程搜索数据为空时下拉框文本色（hide） - --ti-select-dropdown-empty-text-color: var(--ti-common-color-placeholder); + --ti-select-dropdown-empty-text-color: var(--ti-common-color-placeholder, #adb0b8); // 下拉面板空数据提示文本字号 - --ti-select-dropdown-empty-font-size: var(--ti-common-font-size-1); + --ti-select-dropdown-empty-font-size: var(--ti-common-font-size-1, 14px); // 下拉面板空数据提示垂直内边距 - --ti-select-dropdown-empty-padding-horizontal: var(--ti-common-space-10); + --ti-select-dropdown-empty-padding-horizontal: var(--ti-common-space-10, 10px); // 下拉面板空数据提示水平内边距 - --ti-select-dropdown-empty-padding-vertical: var(--ti-common-space-6); + --ti-select-dropdown-empty-padding-vertical: var(--ti-common-space-6, 6px); // 下拉面板空数据图片宽度 - --ti-select-dropdown-empty-image-width: var(--ti-common-size-16x); + --ti-select-dropdown-empty-image-width: var(--ti-common-size-16x, 64px); // 下拉面板空数据图片高度 - --ti-select-dropdown-empty-image-height: var(--ti-common-size-16x); + --ti-select-dropdown-empty-image-height: var(--ti-common-size-16x, 64px); // 下拉面板空数据图片底部外边距 - --ti-select-dropdown-empty-image-margin-bottom: var(--ti-common-space-2x); + --ti-select-dropdown-empty-image-margin-bottom: var(--ti-common-space-2x, 8px); // 下拉面板空数据提示文本行高 - --ti-select-dropdown-empty-line-height: var(--ti-common-line-height-number); + --ti-select-dropdown-empty-line-height: var(--ti-common-line-height-number, 1.5); // 选择下拉框的顶部内边距 - --ti-select-dropdown-padding-top: var(--ti-common-size-base); + --ti-select-dropdown-padding-top: var(--ti-common-size-base, 4px); // 选择下拉框的水平内边距 - --ti-select-dropdown-padding-horizontal: var(--ti-common-size-0); + --ti-select-dropdown-padding-horizontal: var(--ti-common-size-0, 0px); // 选择下拉框的底部内边距 - --ti-select-dropdown-padding-bottom: var(--ti-common-space-base); + --ti-select-dropdown-padding-bottom: var(--ti-common-space-base, 4px); // 下拉面板搜索框背景色（hide） - --ti-select-dropdown-search-bg-color: var(--ti-common-color-bg-white-emphasize); + --ti-select-dropdown-search-bg-color: var(--ti-common-color-bg-white-emphasize, #f2f5fc); // 选择下拉框line背景色 - --ti-select-dropdown-line-bg-color: var(--ti-common-color-line-dividing); + --ti-select-dropdown-line-bg-color: var(--ti-common-color-line-dividing, #dfe1e6); // 选择下拉框line垂直外边距 - --ti-select-dropdown-line-margin-vertical: var(--ti-common-size-0); + --ti-select-dropdown-line-margin-vertical: var(--ti-common-size-0, 0px); // 选择下拉框line水平外边距 - --ti-select-dropdown-line-margin-horizontal: var(--ti-common-space-2x); + --ti-select-dropdown-line-margin-horizontal: var(--ti-common-space-2x, 8px); // 选择下拉框line高度 - --ti-select-dropdown-line-height: var(--ti-common-font-size-1); + --ti-select-dropdown-line-height: var(--ti-common-font-size-1, 14px); // 选择下拉框line宽度 - --ti-select-dropdown-line-width: var(--ti-common-border-weight-normal); + --ti-select-dropdown-line-width: var(--ti-common-border-weight-normal, 1px); // 选择下拉框悬浮图标色 - --ti-select-dropdown-svg-hover-bg-color: var(--ti-common-color-primary-normal); + --ti-select-dropdown-svg-hover-bg-color: var(--ti-common-color-primary-normal, #5e7ce0); // 下拉面板搜索框顶部外边距 --ti-select-dropdown-search-margin-top: calc(-1 * var(--ti-common-size-base)); // 下拉面板搜索框底部外边距 - --ti-select-dropdown-search-margin-bottom: var(--ti-common-space-base); + --ti-select-dropdown-search-margin-bottom: var(--ti-common-space-base, 4px); // 下拉面板搜索框左侧外边距 - --ti-select-dropdown-search-margin-left: var(--ti-common-size-0); + --ti-select-dropdown-search-margin-left: var(--ti-common-size-0, 0px); // 下拉面板搜索框右侧外边距 - --ti-select-dropdown-search-margin-right: var(--ti-common-size-0); + --ti-select-dropdown-search-margin-right: var(--ti-common-size-0, 0px); // 下拉面板搜索框的宽度 --ti-select-dropdown-search-width: 100%; // 下拉面板搜索框的边框宽度 - --ti-select-dropdown-search-border-width: var(--ti-common-size-0); + --ti-select-dropdown-search-border-width: var(--ti-common-size-0, 0px); // 下拉面板搜索框尾部图标显示状态 --ti-select-dropdown-search-suffix-display: 'block'; // 下拉面板搜索框头部图标显示状态 @@ -82,15 +82,15 @@ // 下拉面板搜索框右侧内边距 --ti-select-dropdown-search-input-padding-right: 54px; // 下拉面板搜索框左侧外边距 - --ti-select-dropdown-search-input-padding-left: var(--ti-common-space-2x); + --ti-select-dropdown-search-input-padding-left: var(--ti-common-space-2x, 8px); // 面板可搜索的时候空数据容器顶部内边距 - --ti-select-dropdown-search-empty-padding-top: var(--ti-common-space-6); + --ti-select-dropdown-search-empty-padding-top: var(--ti-common-space-6, 6px); // 面板可搜索的时候空数据容器底部内边距 - --ti-select-dropdown-search-empty-padding-bottom: var(--ti-common-space-6); + --ti-select-dropdown-search-empty-padding-bottom: var(--ti-common-space-6, 6px); // 滚动容器的底部外边距 - --ti-select-dropdown-wrap-padding-bottom: var(--ti-common-space-0); + --ti-select-dropdown-wrap-padding-bottom: var(--ti-common-space-0, 0px); // 下拉面板图标尺寸 - --ti-select-dropdown-icon-size: var(--ti-common-font-size-1); + --ti-select-dropdown-icon-size: var(--ti-common-font-size-1, 14px); // 下拉面板图标颜色 - --ti-select-dropdown-icon-color: var(--ti-common-color-icon-normal); + --ti-select-dropdown-icon-color: var(--ti-common-color-icon-normal, #575d6c); } \ No newline at end of file diff --git a/packages/theme/src/select/vars.less b/packages/theme/src/select/vars.less index 81e54b122..fd9f0f297 100644 --- a/packages/theme/src/select/vars.less +++ b/packages/theme/src/select/vars.less @@ -12,51 +12,51 @@ .component-css-vars-select() { // 输入框悬浮时的边框色(hide) - --ti-select-inner-border-color-active: var(--ti-common-color-line-active); + --ti-select-inner-border-color-active: var(--ti-common-color-line-active, #5e7ce0); // 可搜索输入框文本色 - --ti-select-input-text-color: var(--ti-common-color-text-primary); + --ti-select-input-text-color: var(--ti-common-color-text-primary, #252b3a); // 选择器输入框字号(hide) - --ti-select-input-font-size: var(--ti-common-font-size-base); + --ti-select-input-font-size: var(--ti-common-font-size-base, 12px); // 选择器尾部图标距离输入框的垂直距离 --ti-select-input-icon-top: 14px; // 中型选择器尾部图标距离输入框的垂直距离 - --ti-select-input-icon-top-medium: var(--ti-common-space-5x); + --ti-select-input-icon-top-medium: var(--ti-common-space-5x, 20px); // 小型选择器尾部图标距离输入框的垂直距离 - --ti-select-input-icon-top-small: var(--ti-common-space-4x); + --ti-select-input-icon-top-small: var(--ti-common-space-4x, 16px); // 迷你型选择器尾部图标距离输入框的垂直距离 - --ti-select-input-icon-top-mini: var(--ti-common-space-3x); + --ti-select-input-icon-top-mini: var(--ti-common-space-3x, 12px); // 选择器输入框尾部图标的颜色 - --ti-select-input-caret-icon-color: var(--ti-common-color-text-secondary); + --ti-select-input-caret-icon-color: var(--ti-common-color-text-secondary, #575d6c); // 选择器输入框尾部图标悬浮时的颜色 - --ti-select-input-caret-hover-icon-color: var(--ti-common-color-icon-hover); + --ti-select-input-caret-hover-icon-color: var(--ti-common-color-icon-hover, #5e7ce0); // 选择器输入框尾部图标的尺寸 --ti-select-input-caret-font-size: 10px; // 选择器输入框尾部关闭图标右侧外边距 - --ti-select-input-icon-close-margin-right: var(--ti-common-space-0); + --ti-select-input-icon-close-margin-right: var(--ti-common-space-0, 0px); // 选择器输入框尾部图标禁用时的颜色（hide） - --ti-select-input-disabled-caret-text-color: var(--ti-common-color-text-disabled); + --ti-select-input-disabled-caret-text-color: var(--ti-common-color-text-disabled, #adb0b8); // 输入框禁用且悬浮时的边框色 - --ti-select-input-disabled-hover-border-color: var(--ti-common-color-line-disabled); + --ti-select-input-disabled-hover-border-color: var(--ti-common-color-line-disabled, #dfe1e6); // 迷你型选择器输入框高度（hide） - --ti-select-input-mini-height: var(--ti-common-size-6x); + --ti-select-input-mini-height: var(--ti-common-size-6x, 24px); // 小型选择器输入框高度（hide） - --ti-select-input-small-height: var(--ti-common-size-7x); + --ti-select-input-small-height: var(--ti-common-size-7x, 28px); // 中型选择器输入框高度（hide） --ti-select-input-medium-height: var(--ti-common-size-42); // 选择器多选标签容器的左侧内边距 - --ti-select-tags-wrap-padding-left: var(--ti-common-space-1); + --ti-select-tags-wrap-padding-left: var(--ti-common-space-1, 1px); // 选择器多选标签容器的顶部内边距 - --ti-select-tags-wrap-padding-top: var(--ti-common-space-1); + --ti-select-tags-wrap-padding-top: var(--ti-common-space-1, 1px); // 选择器多选标签容器的底部内边距 - --ti-select-tags-wrap-padding-bottom: var(--ti-common-space-1); + --ti-select-tags-wrap-padding-bottom: var(--ti-common-space-1, 1px); // 选择器多选标签容器的右侧内边距 - --ti-select-tags-wrap-padding-right: var(--ti-common-space-0); + --ti-select-tags-wrap-padding-right: var(--ti-common-space-0, 0px); // 选择器多选标签顶部外边距 - --ti-select-tags-margin-top: var(--ti-common-space-1); + --ti-select-tags-margin-top: var(--ti-common-space-1, 1px); // 选择器多选标签右侧外边距 - --ti-select-tags-margin-right: var(--ti-common-space-1); + --ti-select-tags-margin-right: var(--ti-common-space-1, 1px); // 选择器多选标签底部外边距 - --ti-select-tags-margin-bottom: var(--ti-common-space-1); + --ti-select-tags-margin-bottom: var(--ti-common-space-1, 1px); // 选择器多选标签左侧外边距 - --ti-select-tags-margin-left: var(--ti-common-space-1); + --ti-select-tags-margin-left: var(--ti-common-space-1, 1px); } \ No newline at end of file diff --git a/packages/theme/src/selector/vars.less b/packages/theme/src/selector/vars.less index fbc705867..8a86792f3 100644 --- a/packages/theme/src/selector/vars.less +++ b/packages/theme/src/selector/vars.less @@ -11,17 +11,17 @@ */ .component-css-vars-selector() { - --ti-selector-border-color: var(--ti-common-color-border); - --ti-selector-border-radius: var(--ti-common-border-radius-normal); - --ti-selector-font-size: var(--ti-common-font-size-base); - --ti-selector-text-color: var(--ti-common-color-info-normal); - --ti-selector-icon-size: var(--ti-common-size-4x); - --ti-selector-icon-color: var(--ti-base-color-bg-5); - --ti-selector-selected-icon-color: var(--ti-base-color-brand-6); - --ti-selector-icon-hover-text-color: var(--ti-base-color-brand-5); - --ti-selector-list-height: var(--ti-common-size-height-normal); - --ti-selector-bg-color: var(--ti-common-color-light); - --ti-selector-selected-text-color: var(--ti-common-color-placeholder); - --ti-selector-selected-hover-bg-color: var(--ti-common-color-selected-background); - --ti-selector-select-bg-color: var(--ti-common-color-hover-background); + --ti-selector-border-color: var(--ti-common-color-border, #adb0b8); + --ti-selector-border-radius: var(--ti-common-border-radius-normal, 2px); + --ti-selector-font-size: var(--ti-common-font-size-base, 12px); + --ti-selector-text-color: var(--ti-common-color-info-normal, #252b3a); + --ti-selector-icon-size: var(--ti-common-size-4x, 16px); + --ti-selector-icon-color: var(--ti-base-color-bg-5, #f5f5f6); + --ti-selector-selected-icon-color: var(--ti-base-color-brand-6, #5e7ce0); + --ti-selector-icon-hover-text-color: var(--ti-base-color-brand-5, #7693f5); + --ti-selector-list-height: var(--ti-common-size-height-normal, 28px); + --ti-selector-bg-color: var(--ti-common-color-light, #fff); + --ti-selector-selected-text-color: var(--ti-common-color-placeholder, #adb0b8); + --ti-selector-selected-hover-bg-color: var(--ti-common-color-selected-background, #5e7ce0); + --ti-selector-select-bg-color: var(--ti-common-color-hover-background, #f2f5fc); } diff --git a/packages/theme/src/slide-bar/vars.less b/packages/theme/src/slide-bar/vars.less index 7d3ae9642..d22be3e40 100644 --- a/packages/theme/src/slide-bar/vars.less +++ b/packages/theme/src/slide-bar/vars.less @@ -12,7 +12,7 @@ // 组件待废弃，不整改里面的变量了 .component-css-vars-slide-bar() { // 滚动块边框色 - --ti-slider-progress-box-border-color: var(--ti-common-color-light); + --ti-slider-progress-box-border-color: var(--ti-common-color-light, #fff); // 滚动块悬浮时的边框色 --ti-slider-progress-box-hover-border-color: rgba(153, 153, 153, 0.7); // 滚动块左右按钮色 diff --git a/packages/theme/src/slider/vars.less b/packages/theme/src/slider/vars.less index 0b872cea5..19ca4ccd4 100644 --- a/packages/theme/src/slider/vars.less +++ b/packages/theme/src/slider/vars.less @@ -12,71 +12,71 @@ .component-css-vars-slider() { // 滑块线条默认背景色 - --ti-slider-bg-color: var(--ti-common-color-bg-light-normal); + --ti-slider-bg-color: var(--ti-common-color-bg-light-normal, #e9edfa); // 滑块线条高度 - --ti-slider-height: var(--ti-common-size-2x); + --ti-slider-height: var(--ti-common-size-2x, 8px); // 滑块线条圆角 - --ti-slider-border-radius: var(--ti-common-border-radius-normal); + --ti-slider-border-radius: var(--ti-common-border-radius-normal, 2px); // 滑块进度条已完成部分的高度 - --ti-slider-range-height: var(--ti-common-size-4x); + --ti-slider-range-height: var(--ti-common-size-4x, 16px); // 横向滑块进度条圆角 - --ti-slider-range-border-radius: var(--ti-common-border-radius-normal); + --ti-slider-range-border-radius: var(--ti-common-border-radius-normal, 2px); // 滑块进度条背景色 - --ti-slider-range-bg-color: var(--ti-common-color-icon-hover); + --ti-slider-range-bg-color: var(--ti-common-color-icon-hover, #5e7ce0); // 滑块进度条悬浮背景色 - --ti-slider-range-hover-bg-color: var(--ti-common-color-icon-hover); + --ti-slider-range-hover-bg-color: var(--ti-common-color-icon-hover, #5e7ce0); // 滑块提示框top --ti-slider-range-top: calc(-1 * var(--ti-common-space-base)); // 滑块进度条顶部外边距 --ti-slider-range-margin-top: calc(-1 * var(--ti-common-space-base)); // 滑块点宽度 - --ti-slider-handle-width: var(--ti-common-size-5x); + --ti-slider-handle-width: var(--ti-common-size-5x, 20px); // 滑块点高度 - --ti-slider-handle-height: var(--ti-common-size-7x); + --ti-slider-handle-height: var(--ti-common-size-7x, 28px); // 滑块点背景色 --ti-slider-handle-bg-color: linear-gradient( 153deg, - var(--ti-common-color-icon-white), - var(--ti-common-color-bg-light-normal) 99% + var(--ti-common-color-icon-white, #fff), + var(--ti-common-color-bg-light-normal, #e9edfa) 99% ); // 滑块点边框色 - --ti-slider-handle-border-color: var(--ti-common-color-line-active); + --ti-slider-handle-border-color: var(--ti-common-color-line-active, #5e7ce0); // 滑块点圆角 - --ti-slider-handle-border-radius: calc(var(--ti-common-border-radius-2) + 2px); + --ti-slider-handle-border-radius: calc(var(--ti-common-border-radius-2, 8px) + 2px); // 滑块点悬浮文本色 - --ti-slider-handle-text-color-hover: var(--ti-common-color-bg-hover); + --ti-slider-handle-text-color-hover: var(--ti-common-color-bg-hover, #344899); // 滑块点悬浮边框色 - --ti-slider-handle-border-color-hover: var(--ti-common-color-bg-hover); + --ti-slider-handle-border-color-hover: var(--ti-common-color-bg-hover, #344899); // 滑块点阴影 - --ti-slider-handle-box-shadow: var(--ti-common-shadow-1-down); + --ti-slider-handle-box-shadow: var(--ti-common-shadow-1-down, 0 1px 4px 0 rgba(0, 0, 0, 0.1)); // 滑块点top --ti-slider-handle-top: calc(-1 * var(--ti-common-space-base)); // 滑块点边框厚度 - --ti-slider-handle-border-weight: var(--ti-common-border-weight-normal); + --ti-slider-handle-border-weight: var(--ti-common-border-weight-normal, 1px); // 滑块点图标的display(hide) --ti-slider-handle-icon-display: inline-block; // 滑块点图标色 - --ti-slider-handle-icon-fill-color: var(--ti-common-color-line-active); + --ti-slider-handle-icon-fill-color: var(--ti-common-color-line-active, #5e7ce0); // 滑块点图标悬浮色 - --ti-slider-handle-icon-fill-color-hover: var(--ti-common-color-bg-hover); + --ti-slider-handle-icon-fill-color-hover: var(--ti-common-color-bg-hover, #344899); // 滑块点的缩放值(hide) --ti-slider-handle-transform: scale(1); // 滑块点顶部外边距 - --ti-slider-handle-margin-top: calc(var(--ti-common-space-10) * -1); + --ti-slider-handle-margin-top: calc(var(--ti-common-space-10, 10px) * -1); // 滑块点水平外边距 - --ti-slider-handle-margin-horizontal: calc(var(--ti-common-space-2x) * -1); + --ti-slider-handle-margin-horizontal: calc(var(--ti-common-space-2x, 8px) * -1); // 滑块点底部外边距 - --ti-slider-handle-margin-bottom: var(--ti-common-space-0); + --ti-slider-handle-margin-bottom: var(--ti-common-space-0, 0px); // 滑块输入框高度 --ti-slider-input-height: var(--ti-common-size-height-normal, 30px); // 滑块输入框宽度 - --ti-slider-input-width: var(--ti-common-size-10x); + --ti-slider-input-width: var(--ti-common-size-10x, 40px); // 滑块输入框边框圆角 - --ti-slider-input-border-radius: calc(var(--ti-common-border-radius-normal) + 2px); + --ti-slider-input-border-radius: calc(var(--ti-common-border-radius-normal, 2px) + 2px); // 滑块输入框边框色 --ti-slider-input-border-color: var(--ti-common-color-border, #d9d9d9); // 滑块输入框文本色 @@ -85,18 +85,18 @@ --ti-slider-input-bg-color: var(--ti-common-color-light, #fff); // 滑块活动时提示框背景色 - --ti-slider-tips-bg-color: var(--ti-common-color-bg-dark-normal); + --ti-slider-tips-bg-color: var(--ti-common-color-bg-dark-normal, #464c59); // 滑块活动时提示框边框色 - --ti-slider-tips-border-color: var(--ti-common-color-bg-dark-normal); + --ti-slider-tips-border-color: var(--ti-common-color-bg-dark-normal, #464c59); // 滑块活动时提示框文本色 - --ti-slider-tips-text-color: var(--ti-common-color-text-white); + --ti-slider-tips-text-color: var(--ti-common-color-text-white, #fff); // 滑块活动时提示框左外边距 - --ti-slider-tips-margin-left: calc(var(--ti-common-space-6) / 2); + --ti-slider-tips-margin-left: calc(var(--ti-common-space-6, 6px) / 2); // 竖向滑块进度条顶部外边距 - --ti-slider-margin-vertical: calc(var(--ti-common-space-2x) * -1); + --ti-slider-margin-vertical: calc(var(--ti-common-space-2x, 8px) * -1); // 竖向滑块右外边距 - --ti-slider-margin-right: var(--ti-common-space-0); + --ti-slider-margin-right: var(--ti-common-space-0, 0px); // 竖向滑块左外边距 - --ti-slider-margin-left: calc(var(--ti-common-space-6) * -1); + --ti-slider-margin-left: calc(var(--ti-common-space-6, 6px) * -1); } diff --git a/packages/theme/src/split/vars.less b/packages/theme/src/split/vars.less index 6b21ae1a0..6b3b99459 100644 --- a/packages/theme/src/split/vars.less +++ b/packages/theme/src/split/vars.less @@ -12,25 +12,25 @@ .component-css-vars-split() { // 分割面板字号 - --ti-split-pane-font-size: var(--ti-common-font-size-2); + --ti-split-pane-font-size: var(--ti-common-font-size-2, 16px); // 分割线背景色 - --ti-split-trigger-bg-color: var(--ti-common-color-line-dividing); + --ti-split-trigger-bg-color: var(--ti-common-color-line-dividing, #dfe1e6); // 分割线圆点背景色 - --ti-split-trigger-bar-bg-color: var(--ti-common-color-icon-normal); + --ti-split-trigger-bar-bg-color: var(--ti-common-color-icon-normal, #575d6c); // 分割线悬浮背景色 --ti-split-trigger-hover-bg-color: var(--ti-split-trigger-bg-color); // 分割线圆点悬浮背景色 --ti-split-trigger-bar-hover-bg-color: var(--ti-split-trigger-bar-bg-color); // 分割线条圆点盒子背景色 - --ti-split-trigger-bar-con-bg-color: var(--ti-common-color-light); + --ti-split-trigger-bar-con-bg-color: var(--ti-common-color-light, #fff); // 分割线和圆点尺寸 - --ti-split-trigger-size: var(--ti-common-size-base); + --ti-split-trigger-size: var(--ti-common-size-base, 4px); // 水平分割线圆点左外边距 - --ti-split-trigger-bar-margin-left: var(--ti-common-space-base); + --ti-split-trigger-bar-margin-left: var(--ti-common-space-base, 4px); // 水平分割线鼠标 --ti-split-trigger-con-col-cursor: e-resize; // 垂直分割线圆点顶部外边距 - --ti-split-trigger-bar-margin-top: var(--ti-common-space-base); + --ti-split-trigger-bar-margin-top: var(--ti-common-space-base, 4px); // 垂直分割线鼠标 --ti-split-trigger-con-row-cursor: n-resize; } diff --git a/packages/theme/src/steps/vars.less b/packages/theme/src/steps/vars.less index 1f47c5e4e..c33fdb0de 100644 --- a/packages/theme/src/steps/vars.less +++ b/packages/theme/src/steps/vars.less @@ -12,186 +12,186 @@ .component-css-vars-steps() { // 节点圆圈尺寸 - --ti-steps-circle-width-height: var(--ti-common-size-5x); + --ti-steps-circle-width-height: var(--ti-common-size-5x, 20px); // 序号字号 - --ti-steps-number-font-size: var(--ti-common-font-size-base); + --ti-steps-number-font-size: var(--ti-common-font-size-base, 12px); // 节点内容字号 - --ti-steps-font-size-base: var(--ti-common-font-size-base); + --ti-steps-font-size-base: var(--ti-common-font-size-base, 12px); // 节点内容悬浮字号 - --ti-steps-font-size-hover: var(--ti-common-font-weight-4); + --ti-steps-font-size-hover: var(--ti-common-font-weight-4, normal); // 节点内容悬浮字体色 - --ti-steps-text-color-hover: var(--ti-common-color-primary-normal); + --ti-steps-text-color-hover: var(--ti-common-color-primary-normal, #5e7ce0); // 序号圆圈大小 - --ti-steps-icon-size: var(--ti-common-size-5x); + --ti-steps-icon-size: var(--ti-common-size-5x, 20px); // 步骤条字号(hide) - --ti-steps-font-size-7: var(--ti-common-font-size-7); + --ti-steps-font-size-7: var(--ti-common-font-size-7, 36px); // 节点间横线厚度 - --ti-steps-line-height: var(--ti-common-border-weight-normal); + --ti-steps-line-height: var(--ti-common-border-weight-normal, 1px); // 节点间横线水平边距 - --ti-steps-line-margin-horizontal: var(--ti-common-space-2x); + --ti-steps-line-margin-horizontal: var(--ti-common-space-2x, 8px); // 节点间横线最小宽度 - --ti-steps-line-min-width: var(--ti-common-space-4x); + --ti-steps-line-min-width: var(--ti-common-space-4x, 16px); // 节点内容左边距 - --ti-steps-text-margin-left: var(--ti-common-space-base); + --ti-steps-text-margin-left: var(--ti-common-space-base, 4px); // 节点间横线默认长度 - --ti-steps-line-width: var(--ti-common-size-16x); + --ti-steps-line-width: var(--ti-common-size-16x, 64px); // 节点文本内容最大宽度 - --ti-steps-content-max-width: calc(var(--ti-common-space-10) * 25); + --ti-steps-content-max-width: calc(var(--ti-common-space-10, 10px) * 25); // 节点文本内容上边距 - --ti-steps-content-margin-top: var(--ti-common-space-6); + --ti-steps-content-margin-top: var(--ti-common-space-6, 6px); // 底部分割线厚度 - --ti-steps-bottom-divider-height: var(--ti-common-space-1); + --ti-steps-bottom-divider-height: var(--ti-common-space-1, 1px); // 底部分割线与主体间距 - --ti-steps-bottom-divider-margin-top: var(--ti-common-space-4x); + --ti-steps-bottom-divider-margin-top: var(--ti-common-space-4x, 16px); // 底部分割线的颜色 - --ti-steps-bottom-divider-bg-color: var(--ti-common-color-line-dividing); + --ti-steps-bottom-divider-bg-color: var(--ti-common-color-line-dividing, #dfe1e6); // 描述信息最小宽度 - --ti-steps-description-min-width: calc(var(--ti-common-space-10) * 10); + --ti-steps-description-min-width: calc(var(--ti-common-space-10, 10px) * 10); // 活跃节点背景色 - --ti-steps-advanced-active-bg-color: var(--ti-common-color-bg-emphasize); + --ti-steps-advanced-active-bg-color: var(--ti-common-color-bg-emphasize, #5e7ce0); // 活跃节点字重 - --ti-steps-active-font-weight: var(--ti-common-font-weight-4); + --ti-steps-active-font-weight: var(--ti-common-font-weight-4, normal); // 活跃节点内容字体色 - --ti-steps-advanced-active-text-color: var(--ti-common-color-primary-normal); + --ti-steps-advanced-active-text-color: var(--ti-common-color-primary-normal, #5e7ce0); // 已完成节点文本色 - --ti-steps-done-text-color: var(--ti-common-color-text-primary); + --ti-steps-done-text-color: var(--ti-common-color-text-primary, #252b3a); // 已完成节点线条色 - --ti-steps-line-active-bg-color: var(--ti-common-color-line-active); + --ti-steps-line-active-bg-color: var(--ti-common-color-line-active, #5e7ce0); // 已完成节点边框色 - --ti-steps-done-active-border-color: var(--ti-common-color-line-active); + --ti-steps-done-active-border-color: var(--ti-common-color-line-active, #5e7ce0); // 已完成节点图标(或文本)色 - --ti-steps-done-icon-color: var(--ti-common-color-icon-active); + --ti-steps-done-icon-color: var(--ti-common-color-icon-active, #5e7ce0); // 已完成节点图标大小 - --ti-steps-done-icon-size: var(--ti-common-font-size-1); + --ti-steps-done-icon-size: var(--ti-common-font-size-1, 14px); // 已完成节点背景色 - --ti-steps-done-icon-bg-color: var(--ti-common-color-bg-white-normal); + --ti-steps-done-icon-bg-color: var(--ti-common-color-bg-white-normal, #fff); // 未完成的线条色 - --ti-steps-line-bg-color: var(--ti-common-color-bg-secondary); + --ti-steps-line-bg-color: var(--ti-common-color-bg-secondary, #adb0b8); // 未完成节点的背景色 - --ti-steps-icon-bg-color: var(--ti-common-color-bg-white-normal); + --ti-steps-icon-bg-color: var(--ti-common-color-bg-white-normal, #fff); // 未完成节点序号图标色 - --ti-steps-unselected-icon-color: var(--ti-common-color-icon-normal); + --ti-steps-unselected-icon-color: var(--ti-common-color-icon-normal, #575d6c); // 未完成节点序号悬浮图标色 - --ti-steps-unselected-hover-icon-color: var(--ti-common-color-icon-hover); + --ti-steps-unselected-hover-icon-color: var(--ti-common-color-icon-hover, #5e7ce0); // 未完成节点边框色 --ti-steps-unselected-border-color: var(--ti-steps-unselected-icon-color); // 未完成节点悬浮边框色 --ti-steps-unselected-hover-border-color: var(--ti-steps-unselected-hover-icon-color); // 未完成节点内容文本色 - --ti-steps-timeline-date-time-text-color: var(--ti-common-color-text-primary); + --ti-steps-timeline-date-time-text-color: var(--ti-common-color-text-primary, #252b3a); // 错误节点的背景色 - --ti-steps-error-icon-bg-color: var(--ti-common-color-bg-white-normal); + --ti-steps-error-icon-bg-color: var(--ti-common-color-bg-white-normal, #fff); // 错误节点图标色 - --ti-steps-error-icon-color: var(--ti-common-color-error-text); + --ti-steps-error-icon-color: var(--ti-common-color-error-text, #de504e); // 错误节点图标大小 - --ti-steps-error-icon-size: var(--ti-common-font-size-1); + --ti-steps-error-icon-size: var(--ti-common-font-size-1, 14px); // 错误节点边框色 - --ti-steps-error-border-color: var(--ti-common-color-error-border); + --ti-steps-error-border-color: var(--ti-common-color-error-border, #f66f6a); // 错误节点描述文本色 - --ti-steps-error-text-color: var(--ti-common-color-error-text); + --ti-steps-error-text-color: var(--ti-common-color-error-text, #de504e); // 禁用节点的背景色 - --ti-steps-disabled-icon-bg-color: var(--ti-common-color-bg-white-normal); + --ti-steps-disabled-icon-bg-color: var(--ti-common-color-bg-white-normal, #fff); // 禁用节点序号文本色 - --ti-steps-disabled-icon-color: var(--ti-common-color-text-disabled); + --ti-steps-disabled-icon-color: var(--ti-common-color-text-disabled, #adb0b8); // 禁用节点边框色 --ti-steps-disabled-border-color: var(--ti-steps-disabled-icon-color); // 禁用节点描述文本色 - --ti-steps-disabled-text-color: var(--ti-common-color-text-disabled); + --ti-steps-disabled-text-color: var(--ti-common-color-text-disabled, #adb0b8); // mini尺寸序号圆圈大小 - --ti-steps-mini-icon-size: var(--ti-common-font-size-5); + --ti-steps-mini-icon-size: var(--ti-common-font-size-5, 24px); // mini尺寸序号字号 - --ti-steps-mini-number-font-size: var(--ti-common-font-size-base); + --ti-steps-mini-number-font-size: var(--ti-common-font-size-base, 12px); // mini尺寸节点内容字号 - --ti-steps-mini-font-size-base: var(--ti-common-font-size-base); + --ti-steps-mini-font-size-base: var(--ti-common-font-size-base, 12px); // 向导步骤条边框色 - --ti-steps-advanced-border-color: var(--ti-common-color-line-normal); + --ti-steps-advanced-border-color: var(--ti-common-color-line-normal, #adb0b8); // 向导步骤条未选中项文本色 - --ti-steps-advanced-text-color: var(--ti-common-color-text-secondary); + --ti-steps-advanced-text-color: var(--ti-common-color-text-secondary, #575d6c); // 向导步骤条行高 - --ti-steps-advanced-line-height: var(--ti-common-size-7x); + --ti-steps-advanced-line-height: var(--ti-common-size-7x, 28px); // 向导步骤条边框圆角 - --ti-steps-advanced-border-radius: calc(var(--ti-common-space-1) * 3); + --ti-steps-advanced-border-radius: calc(var(--ti-common-space-1, 1px) * 3); // 向导步骤条未选中项背景色 - --ti-steps-advanced-li-bg-color: var(--ti-common-color-bg-white-normal); + --ti-steps-advanced-li-bg-color: var(--ti-common-color-bg-white-normal, #fff); // 向导步骤条当前项和计数标记点的文本色 - --ti-steps-advanced-li-text-color: var(--ti-common-color-selected-text-color); + --ti-steps-advanced-li-text-color: var(--ti-common-color-selected-text-color, #fff); // 向导步骤条节点悬浮文本色 - --ti-steps-advanced-li-hover-text-color: var(--ti-common-color-text-secondary); + --ti-steps-advanced-li-hover-text-color: var(--ti-common-color-text-secondary, #575d6c); // 向导步骤条节点悬浮背景色 - --ti-steps-advanced-li-hover-bg-color: var(--ti-common-color-bg-white-emphasize); + --ti-steps-advanced-li-hover-bg-color: var(--ti-common-color-bg-white-emphasize, #f2f5fc); // 向导步骤条字号 - --ti-steps-advanced-link-font-size: var(--ti-common-font-size-base); + --ti-steps-advanced-link-font-size: var(--ti-common-font-size-base, 12px); // 向导步骤条节点里的图标高度 - --ti-steps-advanced-dot-height: var(--ti-common-size-3x); + --ti-steps-advanced-dot-height: var(--ti-common-size-3x, 12px); // 向导步骤条节点里的图标宽度 - --ti-steps-advanced-dot-width: var(--ti-common-size-3x); + --ti-steps-advanced-dot-width: var(--ti-common-size-3x, 12px); // 向导步骤条计数标记点背景色 - --ti-steps-advanced-count-bg-color: var(--ti-common-bg-primary); + --ti-steps-advanced-count-bg-color: var(--ti-common-bg-primary, #c7000b); // 向导步骤条计数标记点边框圆角 - --ti-steps-advanced-count-border-radius: var(--ti-common-space-10); + --ti-steps-advanced-count-border-radius: var(--ti-common-space-10, 10px); // 向导步骤条计数标记点字号 - --ti-steps-advanced-count-font-size: var(--ti-common-font-size-base); + --ti-steps-advanced-count-font-size: var(--ti-common-font-size-base, 12px); // 向导步骤条计数标记点高度 - --ti-steps-advanced-count-height: calc(var(--ti-common-space-6) * 3); + --ti-steps-advanced-count-height: calc(var(--ti-common-space-6, 6px) * 3); // 向导步骤条厚度(hide) - --ti-steps-advanced-border-weight: calc(var(--ti-common-space-base) * 3.5); + --ti-steps-advanced-border-weight: calc(var(--ti-common-space-base, 4px) * 3.5); // 时间线时间字号(hide) - --ti-steps-timeline-date-time-font-size: var(--ti-common-font-size-base); + --ti-steps-timeline-date-time-font-size: var(--ti-common-font-size-base, 12px); // 向导步骤条正在处理节点背景色(hide) - --ti-steps-advanced-dot-doing-bg-color: var(--ti-common-color-warn); + --ti-steps-advanced-dot-doing-bg-color: var(--ti-common-color-warn, #fa9841); // 向导步骤条待处理节点背景色(hide) - --ti-steps-advanced-dot-wait-bg-color: var(--ti-common-color-success-normal); + --ti-steps-advanced-dot-wait-bg-color: var(--ti-common-color-success-normal, #50d4ab); // 向导步骤条已完成节点背景色(hide) - --ti-steps-advanced-dot-done-bg-color: var(--ti-common-color-success-normal); + --ti-steps-advanced-dot-done-bg-color: var(--ti-common-color-success-normal, #50d4ab); // 竖式步骤条节点左右字号 - --ti-steps-timeline-name-font-size: var(--ti-common-font-size-1); + --ti-steps-timeline-name-font-size: var(--ti-common-font-size-1, 14px); // 竖式步骤条节点左侧时间预留宽度 - --ti-steps-timeline-vertical-time-width: var(--ti-common-size-25x); + --ti-steps-timeline-vertical-time-width: var(--ti-common-size-25x, 100px); // 竖式步骤条线条上下间距 --ti-steps-timeline-line-margin-vertical: 0; // 竖式步骤条线条背景色 - --ti-steps-timeline-vertical-line-bg-color: var(--ti-common-color-line-dividing); + --ti-steps-timeline-vertical-line-bg-color: var(--ti-common-color-line-dividing, #dfe1e6); // 竖式步骤条线条左间距 - --ti-steps-timeline-vertical-line-margin-left: var(--ti-common-size-3x); + --ti-steps-timeline-vertical-line-margin-left: var(--ti-common-size-3x, 12px); // 竖式步骤条线条右间距 --ti-steps-timeline-vertical-line-margin-right: var(--ti-steps-timeline-vertical-line-margin-left); // 竖式步骤条圆点尺寸 - --ti-steps-timeline-dot-width: var(--ti-common-size-2x); + --ti-steps-timeline-dot-width: var(--ti-common-size-2x, 8px); // 竖式步骤条圆点边框色 - --ti-steps-timeline-dot-border-color: var(--ti-common-color-line-dividing); + --ti-steps-timeline-dot-border-color: var(--ti-common-color-line-dividing, #dfe1e6); // 竖式步骤条圆点背景色 - --ti-steps-timeline-dot-bg-color: var(--ti-common-color-line-dividing); + --ti-steps-timeline-dot-bg-color: var(--ti-common-color-line-dividing, #dfe1e6); // 竖式步骤条节点内容底部内边距 - --ti-steps-timeline-item-padding-bottom: var(--ti-common-size-5x); + --ti-steps-timeline-item-padding-bottom: var(--ti-common-size-5x, 20px); // 竖式步骤条二级文本颜色 - --ti-steps-timeline-item-secondary-text-color: var(--ti-common-color-text-weaken); + --ti-steps-timeline-item-secondary-text-color: var(--ti-common-color-text-weaken, #8a8e99); // 竖式步骤条二级文本字号 - --ti-steps-timeline-item-secondary-text-font-size: var(--ti-common-font-size-base); + --ti-steps-timeline-item-secondary-text-font-size: var(--ti-common-font-size-base, 12px); // 竖式步骤条标题与二级文本间距 - --ti-steps-timeline-item-title-margin-bottom: var(--ti-common-size-base); + --ti-steps-timeline-item-title-margin-bottom: var(--ti-common-size-base, 4px); // 基本状态圆点颜色 --ti-steps-timeline-dot-primary-bg-color: var(--ti-steps-timeline-dot-bg-color); // 成功状态圆点颜色 - --ti-steps-timeline-dot-success-bg-color: var(--ti-common-color-success); + --ti-steps-timeline-dot-success-bg-color: var(--ti-common-color-success, #50d4ab); // 警告状态圆点颜色 - --ti-steps-timeline-dot-warning-bg-color: var(--ti-common-color-warn); + --ti-steps-timeline-dot-warning-bg-color: var(--ti-common-color-warn, #fa9841); // 危险状态圆点颜色 - --ti-steps-timeline-dot-danger-bg-color: var(--ti-common-color-error); + --ti-steps-timeline-dot-danger-bg-color: var(--ti-common-color-error, #f66f6a); // 信息状态圆点颜色 - --ti-steps-timeline-dot-info-bg-color: var(--ti-common-color-prompt); + --ti-steps-timeline-dot-info-bg-color: var(--ti-common-color-prompt, #5e7ce0); // 时间信息字体色 - --ti-steps-time-text-color: var(--ti-common-color-text-weaken); + --ti-steps-time-text-color: var(--ti-common-color-text-weaken, #8a8e99); // 时间信息字号 - --ti-steps-time-font-size: var(--ti-common-font-size-base); + --ti-steps-time-font-size: var(--ti-common-font-size-base, 12px); // 时间信息下边距 - --ti-steps-time-margin-bottom: var(--ti-common-space-6); + --ti-steps-time-margin-bottom: var(--ti-common-space-6, 6px); } diff --git a/packages/theme/src/switch/vars.less b/packages/theme/src/switch/vars.less index dfe946b24..a277ecc41 100644 --- a/packages/theme/src/switch/vars.less +++ b/packages/theme/src/switch/vars.less @@ -12,43 +12,43 @@ .component-css-vars-switch() { // 开关开启状态背景色 - --ti-switch-on-bg-color: var(--ti-common-color-bg-emphasize); + --ti-switch-on-bg-color: var(--ti-common-color-bg-emphasize, #5e7ce0); // 开关关闭状态背景色 - --ti-switch-off-bg-color: var(--ti-common-color-bg-secondary); + --ti-switch-off-bg-color: var(--ti-common-color-bg-secondary, #adb0b8); // 开关关闭禁用状态背景色 - --ti-switch-disabled-bg-color: var(--ti-common-color-bg-dark-disabled); + --ti-switch-disabled-bg-color: var(--ti-common-color-bg-dark-disabled, #dfe1e6); // 开关开启禁用状态背景色 - --ti-switch-checked-disabled-bg-color: var(--ti-common-color-bg-light-emphasize); + --ti-switch-checked-disabled-bg-color: var(--ti-common-color-bg-light-emphasize, #beccfa); // 开关开启禁用状态边框色 - --ti-switch-checked-disabled-border-color: var(--ti-common-color-bg-light-emphasize); + --ti-switch-checked-disabled-border-color: var(--ti-common-color-bg-light-emphasize, #beccfa); // 开关禁用状态文本色 - --ti-switch-disabled-text-color: var(--ti-common-color-info-disabled); + --ti-switch-disabled-text-color: var(--ti-common-color-info-disabled, #bfbfbf); // 开关禁用状态圆点色 - --ti-switch-disabled-dot-bg-color: var(--ti-common-color-bg-disabled); + --ti-switch-disabled-dot-bg-color: var(--ti-common-color-bg-disabled, #f5f5f6); // 开关默认圆点色 - --ti-switch-dot-bg-color: var(--ti-common-color-light); + --ti-switch-dot-bg-color: var(--ti-common-color-light, #fff); // 开关圆点尺寸 - --ti-switch-dot-size: var(--ti-common-size-4x); + --ti-switch-dot-size: var(--ti-common-size-4x, 16px); // 开关圆点左边距(hide) - --ti-switch-dot-position-left: var(--ti-common-space-1); + --ti-switch-dot-position-left: var(--ti-common-space-1, 1px); // 开关圆点上边距(hide) - --ti-switch-dot-position-top: var(--ti-common-space-1); + --ti-switch-dot-position-top: var(--ti-common-space-1, 1px); // 开关圆点偏移量(hide) --ti-switch-dot-offset: calc(var(--ti-switch-dot-size) + var(--ti-switch-dot-position-left)); // 开关文本色 - --ti-switch-text-color: var(--ti-common-color-light); + --ti-switch-text-color: var(--ti-common-color-light, #fff); // 默认开关宽度 - --ti-switch-width: calc(var(--ti-common-size-base) * 9.5); + --ti-switch-width: calc(var(--ti-common-size-base, 4px) * 9.5); // 开关高度 - --ti-switch-height: var(--ti-common-size-5x); + --ti-switch-height: var(--ti-common-size-5x, 20px); // 开关圆角 - --ti-switch-border-radius: var(--ti-common-size-6x); + --ti-switch-border-radius: var(--ti-common-size-6x, 24px); // 开关边框厚度 - --ti-switch-border-weight: var(--ti-common-border-weight-normal); + --ti-switch-border-weight: var(--ti-common-border-weight-normal, 1px); // 开关字号 --ti-switch-inner-font-size: 12px; // 开关左侧距离(hide) - --ti-switch-inner-position-left: var(--ti-common-space-4x); + --ti-switch-inner-position-left: var(--ti-common-space-4x, 16px); // 自定义文本开关宽度 - --ti-switch-text-width: calc(var(--ti-common-size-11x) + 1px); + --ti-switch-text-width: calc(var(--ti-common-size-11x, 44px) + 1px); } diff --git a/packages/theme/src/table/vars.less b/packages/theme/src/table/vars.less index 8000b091c..8dcb00569 100644 --- a/packages/theme/src/table/vars.less +++ b/packages/theme/src/table/vars.less @@ -11,17 +11,17 @@ */ .component-css-vars-table() { - --ti-table-text-color: var(--ti-common-color-info-normal); + --ti-table-text-color: var(--ti-common-color-info-normal, #252b3a); --ti-table-bg-color: #fafafa; - --ti-table-odd-bg-color: var(--ti-common-color-light); - --ti-table-hover-bg-color: var(--ti-common-color-hover-background); - --ti-table-disabled-text-color: var(--ti-common-color-text-disabled); + --ti-table-odd-bg-color: var(--ti-common-color-light, #fff); + --ti-table-hover-bg-color: var(--ti-common-color-hover-background, #f2f5fc); + --ti-table-disabled-text-color: var(--ti-common-color-text-disabled, #adb0b8); --ti-table-disabled-bg-color: #f1f1f1; --ti-table-nodata-text-color: #909399; - --ti-table-td-height: var(--ti-common-size-height-medium); - --ti-table-td-font-size: var(--ti-common-font-size-base); - --ti-table-border-color: var(--ti-common-color-border); - --ti-table-thead-bg-color: var(--ti-base-color-brand-1); - --ti-table-icon-font-size: var(--ti-common-font-size-2); - --ti-table-check-icon-color: var(--ti-base-color-brand-6); + --ti-table-td-height: var(--ti-common-size-height-medium, 40px); + --ti-table-td-font-size: var(--ti-common-font-size-base, 12px); + --ti-table-border-color: var(--ti-common-color-border, #adb0b8); + --ti-table-thead-bg-color: var(--ti-base-color-brand-1, #f2f5fc); + --ti-table-icon-font-size: var(--ti-common-font-size-2, 16px); + --ti-table-check-icon-color: var(--ti-base-color-brand-6, #5e7ce0); } diff --git a/packages/theme/src/tabs/vars.less b/packages/theme/src/tabs/vars.less index c801dd3cd..3a9fd014f 100644 --- a/packages/theme/src/tabs/vars.less +++ b/packages/theme/src/tabs/vars.less @@ -12,139 +12,139 @@ .component-css-vars-tabs() { // 标签栏选中项边框色(除bordercard类) - --ti-tabs-header-font-active-border-color: var(--ti-common-color-line-active); + --ti-tabs-header-font-active-border-color: var(--ti-common-color-line-active, #5e7ce0); // 标签栏选中项字重 - --ti-tabs-header-font-weight-active: var(--ti-common-font-weight-5); + --ti-tabs-header-font-weight-active: var(--ti-common-font-weight-5, 500); // 标签栏(选中|悬浮)项文本色(除bordercard类) - --ti-tabs-header-font-active-text-color: var(--ti-common-color-primary-normal); + --ti-tabs-header-font-active-text-color: var(--ti-common-color-primary-normal, #5e7ce0); // 标签栏(更多选项|加号按钮)悬浮文本色 - --ti-tabs-header-text-color: var(--ti-common-color-primary-normal); + --ti-tabs-header-text-color: var(--ti-common-color-primary-normal, #5e7ce0); // 标签栏边框色 - --ti-tabs-border-color: var(--ti-common-color-line-dividing); + --ti-tabs-border-color: var(--ti-common-color-line-dividing, #dfe1e6); // 标签栏新增按钮高度 - --ti-tabs-new-height: calc(var(--ti-common-space-base) * 4.5); + --ti-tabs-new-height: calc(var(--ti-common-space-base, 4px) * 4.5); // 标签栏新增按钮宽度 - --ti-tabs-new-width: calc(var(--ti-common-space-base) * 4.5); + --ti-tabs-new-width: calc(var(--ti-common-space-base, 4px) * 4.5); // 标签栏新增按钮填充色 - --ti-tabs-new-svg-text-color: var(--ti-common-color-placeholder); + --ti-tabs-new-svg-text-color: var(--ti-common-color-placeholder, #adb0b8); // 标签栏更多文字悬浮文本色 - --ti-tabs-more-hover-text-color: var(--ti-common-color-primary-hover); + --ti-tabs-more-hover-text-color: var(--ti-common-color-primary-hover, #7693f5); // 标签页选项禁用色(hide) --ti-tabs-item-disabled-text-color: #b4bccc; // 标签页新增按钮圆角 - --ti-tabs-new-border-radius: var(--ti-common-border-radius-normal); + --ti-tabs-new-border-radius: var(--ti-common-border-radius-normal, 2px); // 标签页下拉框背景色(hide) - --ti-tabs-dropdown-bg-color: var(--ti-common-color-bg-white-normal); + --ti-tabs-dropdown-bg-color: var(--ti-common-color-bg-white-normal, #fff); // 标签页下拉框圆角(hide) - --ti-tabs-dropdown-border-radius: var(--ti-common-border-radius-normal); + --ti-tabs-dropdown-border-radius: var(--ti-common-border-radius-normal, 2px); // 标签页下拉选项文本色(hide) - --ti-tabs-dropdown-li-text-color: var(--ti-common-color-info-normal); + --ti-tabs-dropdown-li-text-color: var(--ti-common-color-info-normal, #252b3a); // 标签页内容字号 - --ti-tabs-content-font-size: var(--ti-common-font-size-2); + --ti-tabs-content-font-size: var(--ti-common-font-size-2, 16px); // card类型(无size属性)标签项高度 - --ti-tabs-height: var(--ti-common-size-10x); + --ti-tabs-height: var(--ti-common-size-10x, 40px); // card类型未选中项文本色 - --ti-tabs-header-font-normal-text-color: var(--ti-common-color-text-primary); + --ti-tabs-header-font-normal-text-color: var(--ti-common-color-text-primary, #252b3a); // card类型选中项下边框色(hide) --ti-tabs-dropdown-li-border-color: #e6e6e6; // card类型选中项顶部块背景色 - --ti-tabs-header-top-bar-active-bg-color: var(--ti-common-color-line-active); + --ti-tabs-header-top-bar-active-bg-color: var(--ti-common-color-line-active, #5e7ce0); // card类型samll尺寸标签栏高度 - --ti-tabs-small-height: var(--ti-common-size-9x); + --ti-tabs-small-height: var(--ti-common-size-9x, 36px); // card类型标签项水平内边距 - --ti-tabs-item-padding-horizontal: var(--ti-common-space-3x); + --ti-tabs-item-padding-horizontal: var(--ti-common-space-3x, 12px); // card类型选中项底部小滑块厚度(hide) - --ti-tabs-item-bottom-border-weight: var(--ti-common-border-weight-normal); + --ti-tabs-item-bottom-border-weight: var(--ti-common-border-weight-normal, 1px); // card类型选中项底部边框色 - --ti-tabs-item-bottom-border-color: var(--ti-common-color-light); + --ti-tabs-item-bottom-border-color: var(--ti-common-color-light, #fff); // card类型选中项(不含下|左)边框厚度 - --ti-tabs-item-top-right-border-weight: var(--ti-common-border-weight-normal); + --ti-tabs-item-top-right-border-weight: var(--ti-common-border-weight-normal, 1px); // card类型选中项背景色 - --ti-tabs-item-card-active-bg-color: var(--ti-common-color-bg-white-normal); + --ti-tabs-item-card-active-bg-color: var(--ti-common-color-bg-white-normal, #fff); // card类型选中项圆角 - --ti-tabs-item-card-border-radius: var(--ti-common-border-radius-0); + --ti-tabs-item-card-border-radius: var(--ti-common-border-radius-0, 0px); // card类型标签项默认上|右边框色 - --ti-tabs-item-card-border-color: var(--ti-common-color-transparent); + --ti-tabs-item-card-border-color: var(--ti-common-color-transparent, transparent); // card类型标签项悬浮字重 - --ti-tabs-item-card-hover-font-weight: var(--ti-common-font-weight-5); + --ti-tabs-item-card-hover-font-weight: var(--ti-common-font-weight-5, 500); // bordercard类型选中项圆角 - --ti-tabs-dark-border-radius: var(--ti-common-border-radius-normal) var(--ti-common-border-radius-normal) 0 0; + --ti-tabs-dark-border-radius: var(--ti-common-border-radius-normal, 2px) var(--ti-common-border-radius-normal, 2px) 0 0; // bordercard类型选中项文本色 - --ti-tabs-dark-text-color-active: var(--ti-common-color-text-primary); + --ti-tabs-dark-text-color-active: var(--ti-common-color-text-primary, #252b3a); // bordercard类型选中项背景色 - --ti-tabs-dark-bg-color-active: var(--ti-common-color-bg-normal); + --ti-tabs-dark-bg-color-active: var(--ti-common-color-bg-normal, #eef0f5); // bordercard类型非选中项悬浮文本色 - --ti-tabs-dark-text-color-hover: var(--ti-common-color-text-white); + --ti-tabs-dark-text-color-hover: var(--ti-common-color-text-white, #fff); // bordercard类型非选中项悬浮背景色 - --ti-tabs-dark-bg-color-hover: var(--ti-common-color-bg-dark-emphasize); + --ti-tabs-dark-bg-color-hover: var(--ti-common-color-bg-dark-emphasize, #5c6173); // bordercard类型非选中项文本色 - --ti-tabs-dark-text-color: var(--ti-common-color-text-darkbg); + --ti-tabs-dark-text-color: var(--ti-common-color-text-darkbg, #adb0b8); // bordercard类型标签项上外边距 - --ti-tabs-dark-margin-top: calc(var(--ti-common-space-base) + 1px); + --ti-tabs-dark-margin-top: calc(var(--ti-common-space-base, 4px) + 1px); // bordercard类型首个标签项左外边距 - --ti-tabs-dark-first-margin-left: var(--ti-common-space-5x); + --ti-tabs-dark-first-margin-left: var(--ti-common-space-5x, 20px); // bordercard类型标签栏边框厚度 - --ti-tabs-dark-border-weight: var(--ti-common-size-0); + --ti-tabs-dark-border-weight: var(--ti-common-size-0, 0px); // bordercard类型默认背景色 - --ti-tabs-header-dark-bg-color: var(--ti-common-color-bg-dark-normal); + --ti-tabs-header-dark-bg-color: var(--ti-common-color-bg-dark-normal, #464c59); // bordercard类型标签项高度 - --ti-tabs-dark-item-height: calc(var(--ti-common-space-base) * 9.25); + --ti-tabs-dark-item-height: calc(var(--ti-common-space-base, 4px) * 9.25); // 标签项超出时上下按钮尺寸[3.9.1新增] - --ti-tabs-prev-next-btn-icon-size: var(--ti-common-font-size-base); + --ti-tabs-prev-next-btn-icon-size: var(--ti-common-font-size-base, 12px); // 标签项默认右外边距 - --ti-tabs-item-margin-right: var(--ti-common-space-10x); + --ti-tabs-item-margin-right: var(--ti-common-space-10x, 40px); // 标签项active边框样式(hide) - --ti-tabs-item-active-border-style: var(--ti-common-border-style-solid); + --ti-tabs-item-active-border-style: var(--ti-common-border-style-solid, solid); // 标签项底部边框样式(hide) - --ti-tabs-item-bottom-border-style: var(--ti-common-border-style-solid); + --ti-tabs-item-bottom-border-style: var(--ti-common-border-style-solid, solid); // 横向标签栏字号 - --ti-tabs-item-font-size: var(--ti-common-font-size-1); + --ti-tabs-item-font-size: var(--ti-common-font-size-1, 14px); // 纵向标签栏非选中项背景色 - --ti-tabs-header-bg-color: var(--ti-common-color-bg-disabled); + --ti-tabs-header-bg-color: var(--ti-common-color-bg-disabled, #f5f5f6); // 纵向标签栏字号 - --ti-tabs-font-size-base: var(--ti-common-font-size-base); + --ti-tabs-font-size-base: var(--ti-common-font-size-base, 12px); // 竖向标签项水平内边距 - --ti-tabs-item-vertical-padding-horizontal: var(--ti-common-space-5x); + --ti-tabs-item-vertical-padding-horizontal: var(--ti-common-space-5x, 20px); // 选中标签项小滑块厚度(不含card类型) - --ti-tabs-item-active-border-weight: var(--ti-common-border-weight-2); + --ti-tabs-item-active-border-weight: var(--ti-common-border-weight-2, 3px); // 选中标签项小滑块边框色 --ti-tabs-item-active-border-color: var(--ti-tabs-header-font-active-border-color); // 可关闭项关闭按钮悬浮背景色 - --ti-tabs-icon-close-hover-bg-color: var(--ti-common-bg-minor-hover); + --ti-tabs-icon-close-hover-bg-color: var(--ti-common-bg-minor-hover, #ffffff); // 可关闭项关闭图标默认背景色 - --ti-tabs-icon-close-default-bg-color: var(--ti-common-color-transparent); + --ti-tabs-icon-close-default-bg-color: var(--ti-common-color-transparent, transparent); // 可关闭项未选中项的关闭图标色 - --ti-tabs-icon-close-default-text-color: var(--ti-common-color-text-primary); + --ti-tabs-icon-close-default-text-color: var(--ti-common-color-text-primary, #252b3a); // 可关闭项(选中项|未选中项悬浮)图标色 - --ti-tabs-icon-close-hover-text-color: var(--ti-common-color-icon-active); + --ti-tabs-icon-close-hover-text-color: var(--ti-common-color-icon-active, #5e7ce0); // 可关闭项关闭图标尺寸 - --ti-tabs-icon-size-close: var(--ti-common-font-size-1); + --ti-tabs-icon-size-close: var(--ti-common-font-size-1, 14px); // 可关闭项关闭图标垂直外边距(hide) - --ti-tabs-icon-close-margin-vertical: var(--ti-common-space-0); + --ti-tabs-icon-close-margin-vertical: var(--ti-common-space-0, 0px); // 可关闭项右外边距 - --ti-tabs-icon-close-margin-right: var(--ti-common-space-0); + --ti-tabs-icon-close-margin-right: var(--ti-common-space-0, 0px); // 可关闭项左外边距 --ti-tabs-icon-close-margin-left: 5px; // 更多下拉框上外边距 - --ti-tabs-dropdown-more-margin-top: var(--ti-common-space-3x); + --ti-tabs-dropdown-more-margin-top: var(--ti-common-space-3x, 12px); // 更多下拉框项悬浮背景色 - --ti-tabs-dropdown-more-item-hover-bg-color: var(--ti-common-color-hover-background); + --ti-tabs-dropdown-more-item-hover-bg-color: var(--ti-common-color-hover-background, #f2f5fc); // 更多下拉框项悬浮字重 - --ti-tabs-dropdown-more-item-hover-font-weight: var(--ti-common-font-weight-5); + --ti-tabs-dropdown-more-item-hover-font-weight: var(--ti-common-font-weight-5, 500); // 头部更多按钮水平内边距 --ti-tabs-more-icon-padding-horizontal: 8.5px; // 头部更多图标盒子高度 - --ti-tabs-more-icon-height: calc(var(--ti-common-size-base) * 10.25); + --ti-tabs-more-icon-height: calc(var(--ti-common-size-base, 4px) * 10.25); // 头部更多图标尺寸[3.9.1新增] - --ti-tabs-more-icon-size: var(--ti-common-font-size-2); + --ti-tabs-more-icon-size: var(--ti-common-font-size-2, 16px); // 头部更多按钮左侧盒子阴影高度 - --ti-tabs-more-left-box-height: var(--ti-common-size-10x); + --ti-tabs-more-left-box-height: var(--ti-common-size-10x, 40px); // 头部更多按钮左侧盒子阴影 --ti-tabs-more-left-box-shadow: -3px 0px 4px 0px rgba(0, 0, 0, 0.08); // 内容垂直内边距 - --ti-tabs-content-padding-vertical: calc(var(--ti-common-space-base) * 3.75); + --ti-tabs-content-padding-vertical: calc(var(--ti-common-space-base, 4px) * 3.75); // 内容水平内边距 - --ti-tabs-content-padding-horizontal: var(--ti-common-space-6x); + --ti-tabs-content-padding-horizontal: var(--ti-common-space-6x, 24px); // buttoncard类型标签栏背景色 --ti-tabs-button-card-nav-bg-color: rgba(0, 0, 0, 0.05); // buttoncard类型选项文本色 @@ -152,19 +152,19 @@ // buttoncard类型选项悬浮文本色 --ti-tabs-button-card-item-hover-text-color: #191919; // buttoncard类型选项字号 - --ti-tabs-button-card-item-font-size: var(--ti-common-font-size-1); + --ti-tabs-button-card-item-font-size: var(--ti-common-font-size-1, 14px); // buttoncard类型选项高度 - --ti-tabs-button-card-item-height: var(--ti-common-size-8x); + --ti-tabs-button-card-item-height: var(--ti-common-size-8x, 32px); // buttoncard类型选中项背景色 - --ti-tabs-button-card-item-active-bg-color: var(--ti-common-color-bg-white-normal); + --ti-tabs-button-card-item-active-bg-color: var(--ti-common-color-bg-white-normal, #fff); // buttoncard类型选中项文本色 --ti-tabs-button-card-item-active-text-color: #191919; // buttoncard类型选中项边框色 --ti-tabs-button-card-item-active-border-color: #191919; // buttoncard类型圆角 - --ti-tabs-button-card-border-radius: var(--ti-common-border-radius-normal); + --ti-tabs-button-card-border-radius: var(--ti-common-border-radius-normal, 2px); // buttoncard类型选项水平内边距 - --ti-tabs-button-card-title-padding-horizontal: var(--ti-common-space-6x); + --ti-tabs-button-card-title-padding-horizontal: var(--ti-common-space-6x, 24px); // buttoncard类型字重 - --ti-tabs-button-card-font-weight: var(--ti-common-font-weight-7); + --ti-tabs-button-card-font-weight: var(--ti-common-font-weight-7, bold); } diff --git a/packages/theme/src/tag-group/vars.less b/packages/theme/src/tag-group/vars.less index f8d14589a..dda016c5c 100644 --- a/packages/theme/src/tag-group/vars.less +++ b/packages/theme/src/tag-group/vars.less @@ -12,7 +12,7 @@ .component-css-vars-tag-group() { // 标签组右内边距 - --ti-tag-group-padding-right: var(--ti-common-space-8x); + --ti-tag-group-padding-right: var(--ti-common-space-8x, 32px); // 标签组省略图标色 - --ti-tag-group-ellipsis-icon-color: var(--ti-common-color-primary-normal); + --ti-tag-group-ellipsis-icon-color: var(--ti-common-color-primary-normal, #5e7ce0); } diff --git a/packages/theme/src/tag/vars.less b/packages/theme/src/tag/vars.less index 3c7a43c41..53cd88d50 100644 --- a/packages/theme/src/tag/vars.less +++ b/packages/theme/src/tag/vars.less @@ -12,119 +12,119 @@ .component-css-vars-tag() { // 标签默认高度 - --ti-tag-height: calc(var(--ti-common-size-base) * 5.5); + --ti-tag-height: calc(var(--ti-common-size-base, 4px) * 5.5); // 中等标签高度 - --ti-tag-medium-height: var(--ti-common-size-6x); + --ti-tag-medium-height: var(--ti-common-size-6x, 24px); // 中等标签水平内边距 - --ti-tag-medium-padding-horizontal: var(--ti-common-space-2x); + --ti-tag-medium-padding-horizontal: var(--ti-common-space-2x, 8px); // 中型标签圆角 - --ti-tag-medium-border-radius: var(--ti-common-border-radius-normal); + --ti-tag-medium-border-radius: var(--ti-common-border-radius-normal, 2px); // 小型标签高度 - --ti-tag-small-height: var(--ti-common-line-height-4); + --ti-tag-small-height: var(--ti-common-line-height-4, 20px); // 小型标签水平内边距 - --ti-tag-small-padding-horizontal: var(--ti-common-space-2x); + --ti-tag-small-padding-horizontal: var(--ti-common-space-2x, 8px); // 超小标签高度 - --ti-tag-mini-height: var(--ti-common-size-4x); + --ti-tag-mini-height: var(--ti-common-size-4x, 16px); // 标签边框厚度 - --ti-tag-border-weight: var(--ti-common-border-weight-normal); + --ti-tag-border-weight: var(--ti-common-border-weight-normal, 1px); // 标签圆角 - --ti-tag-border-radius: var(--ti-common-border-radius-normal); + --ti-tag-border-radius: var(--ti-common-border-radius-normal, 2px); // 小型|超小标签圆角 - --ti-tag-small-border-radius: var(--ti-common-border-radius-normal); + --ti-tag-small-border-radius: var(--ti-common-border-radius-normal, 2px); // 标签默认字号 - --ti-tag-font-size: var(--ti-common-font-size-base); + --ti-tag-font-size: var(--ti-common-font-size-base, 12px); // 标签关闭按钮字号 - --ti-tag-close-font-size: var(--ti-common-font-size-1); + --ti-tag-close-font-size: var(--ti-common-font-size-1, 14px); // 标签关闭按钮默认左外边距 - --ti-tag-close-margin-left: var(--ti-common-space-6); + --ti-tag-close-margin-left: var(--ti-common-space-6, 6px); // 标签关闭按钮默认右外边距 - --ti-tag-close-margin-right: var(--ti-common-space-0); + --ti-tag-close-margin-right: var(--ti-common-space-0, 0px); // 中型标签关闭按钮左外边距 - --ti-tag-close-medium-margin-left: var(--ti-common-space-6); + --ti-tag-close-medium-margin-left: var(--ti-common-space-6, 6px); // 中等标签关闭按钮右外边距 - --ti-tag-close-medium-margin-right: var(--ti-common-space-0); + --ti-tag-close-medium-margin-right: var(--ti-common-space-0, 0px); // (小型|超小)标签关闭按钮左外边距 - --ti-tag-close-small-margin-left: var(--ti-common-space-6); + --ti-tag-close-small-margin-left: var(--ti-common-space-6, 6px); // (小型|超小)标签关闭按钮右外边距 - --ti-tag-close-small-margin-right: var(--ti-common-space-0); + --ti-tag-close-small-margin-right: var(--ti-common-space-0, 0px); // light主题标签默认文本色 - --ti-tag-primary-text-color: var(--ti-common-color-text-secondary); + --ti-tag-primary-text-color: var(--ti-common-color-text-secondary, #575d6c); // light主题标签默认关闭图标色 - --ti-tag-primary-close-icon-color: var(--ti-common-color-text-secondary); + --ti-tag-primary-close-icon-color: var(--ti-common-color-text-secondary, #575d6c); // light主题标签默认关闭图标悬浮色 - --ti-tag-primary-close-hover-icon-color: var(--ti-common-color-text-secondary); + --ti-tag-primary-close-hover-icon-color: var(--ti-common-color-text-secondary, #575d6c); // light主题标签默认关闭按钮透明度(hide) --ti-tag-primary-close-opacity: 0.5; // light主题标签默认边框色 - --ti-tag-primary-border-color: var(--ti-common-color-bg-normal); + --ti-tag-primary-border-color: var(--ti-common-color-bg-normal, #eef0f5); // light主题标签默认背景色 - --ti-tag-primary-background-color: var(--ti-common-color-bg-normal); + --ti-tag-primary-background-color: var(--ti-common-color-bg-normal, #eef0f5); // light主题警告类标签(文本|边框)色 - --ti-tag-warning-text-color: var(--ti-common-color-warn-text); + --ti-tag-warning-text-color: var(--ti-common-color-warn-text, #e37d29); // light主题警告类标签边框色 - --ti-tag-warning-border-color: var(--ti-common-color-warn-border); + --ti-tag-warning-border-color: var(--ti-common-color-warn-border, #ffd0a6); // light主题警告类标签背景色 - --ti-tag-warning-background-color: var(--ti-common-color-warn-bg); + --ti-tag-warning-background-color: var(--ti-common-color-warn-bg, #fff3e8); // light主题危险类标签(文本|边框)色 - --ti-tag-danger-text-color: var(--ti-common-color-error-text); + --ti-tag-danger-text-color: var(--ti-common-color-error-text, #de504e); // light主题危险类标签边框色 - --ti-tag-danger-border-color: var(--ti-common-color-error-border-secondary); + --ti-tag-danger-border-color: var(--ti-common-color-error-border-secondary, #ffbcba); // (dark|light)主题危险类标签背景色 - --ti-tag-danger-background-color: var(--ti-common-color-error-bg); + --ti-tag-danger-background-color: var(--ti-common-color-error-bg, #ffeeed); // light主题成功类标签(文本|边框)色 - --ti-tag-success-text-color: var(--ti-common-color-text-success); + --ti-tag-success-text-color: var(--ti-common-color-text-success, #3ac295); // light主题成功类标签边框色 - --ti-tag-success-border-color: var(--ti-common-color-success-border); + --ti-tag-success-border-color: var(--ti-common-color-success-border, #acf2dc); // light主题成功类标签背景色 - --ti-tag-success-background-color: var(--ti-common-color-success-bg); + --ti-tag-success-background-color: var(--ti-common-color-success-bg, #edfff9); // light主题信息类标签(文本|边框)色 - --ti-tag-info-text-color: var(--ti-common-color-text-primary); + --ti-tag-info-text-color: var(--ti-common-color-text-primary, #252b3a); // light主题信息类标签边框色 - --ti-tag-info-border-color: var(--ti-common-color-info-border); + --ti-tag-info-border-color: var(--ti-common-color-info-border, #d3d4d6); // light主题信息类标签背景色 - --ti-tag-info-background-color: var(--ti-common-color-info-bg); + --ti-tag-info-background-color: var(--ti-common-color-info-bg, rgba(51, 51, 51, 0.06)); // dark主题标签默认文本色 - --ti-tag-dark-text-color: var(--ti-common-color-light); + --ti-tag-dark-text-color: var(--ti-common-color-light, #fff); // dark主题标签默认(背景|边框)色 - --ti-tag-dark-bg-color: var(--ti-common-color-prompt); + --ti-tag-dark-bg-color: var(--ti-common-color-prompt, #5e7ce0); // dark主题成功类标签(背景|边框)色 - --ti-tag-dark-success-bg-color: var(--ti-common-color-success); + --ti-tag-dark-success-bg-color: var(--ti-common-color-success, #50d4ab); // dark主题警告类标签(背景|边框)色 - --ti-tag-dark-warning-bg-color: var(--ti-common-color-warn); + --ti-tag-dark-warning-bg-color: var(--ti-common-color-warn, #fa9841); // dark主题危险类标签背景色 - --ti-tag-dark-danger-bg-color: var(--ti-common-color-error); + --ti-tag-dark-danger-bg-color: var(--ti-common-color-error, #f66f6a); // dark主题信息类标签(背景|边框)色 - --ti-tag-dark-info-bg-color: var(--ti-common-color-info); + --ti-tag-dark-info-bg-color: var(--ti-common-color-info, #252b3a); // plain主题标签默认文本色 - --ti-tag-plain-text-color: var(--ti-common-color-prompt); + --ti-tag-plain-text-color: var(--ti-common-color-prompt, #5e7ce0); // plain主题标签默认边框色 - --ti-tag-plain-border-color: var(--ti-common-color-prompt-border); + --ti-tag-plain-border-color: var(--ti-common-color-prompt-border, #beccfa); // plain主题标签默认背景色 - --ti-tag-plain-background-color: var(--ti-common-color-light); + --ti-tag-plain-background-color: var(--ti-common-color-light, #fff); // plain主题信息类标签文本色 - --ti-tag-plain-info-text-color: var(--ti-common-color-info); + --ti-tag-plain-info-text-color: var(--ti-common-color-info, #252b3a); // plain主题信息类标签边框色 - --ti-tag-plain-info-border-color: var(--ti-common-color-info-border); + --ti-tag-plain-info-border-color: var(--ti-common-color-info-border, #d3d4d6); // plain主题成功类标签文本色 - --ti-tag-plain-success-text-color: var(--ti-common-color-success); + --ti-tag-plain-success-text-color: var(--ti-common-color-success, #50d4ab); // plain主题成功类标签边框色 - --ti-tag-plain-success-border-color: var(--ti-common-color-success-border); + --ti-tag-plain-success-border-color: var(--ti-common-color-success-border, #acf2dc); // plain主题警告类标签文本色 - --ti-tag-plain-warning-text-color: var(--ti-common-color-warn); + --ti-tag-plain-warning-text-color: var(--ti-common-color-warn, #fa9841); // plain主题警告类标签边框色 - --ti-tag-plain-warning-border-color: var(--ti-common-color-warn-border); + --ti-tag-plain-warning-border-color: var(--ti-common-color-warn-border, #ffd0a6); // plain主题危险类标签文本色 - --ti-tag-plain-danger-text-color: var(--ti-common-color-error); + --ti-tag-plain-danger-text-color: var(--ti-common-color-error, #f66f6a); // plain主题危险类标签边框色 - --ti-tag-plain-danger-border-color: var(--ti-common-color-error-border-secondary); + --ti-tag-plain-danger-border-color: var(--ti-common-color-error-border-secondary, #ffbcba); } diff --git a/packages/theme/src/tall-storage/vars.less b/packages/theme/src/tall-storage/vars.less index d0be4983f..d8fa2565f 100644 --- a/packages/theme/src/tall-storage/vars.less +++ b/packages/theme/src/tall-storage/vars.less @@ -11,8 +11,8 @@ */ .component-css-vars-tall-storage() { - --ti-tall-storage-bg-color: var(--ti-common-color-light); - --ti-tall-storage-border-radius: var(--ti-common-border-radius-normal); - --ti-tall-storage-item-height: var(--ti-common-size-height-normal); - --ti-tall-storage-item-bg-color: var(--ti-common-color-hover-background); + --ti-tall-storage-bg-color: var(--ti-common-color-light, #fff); + --ti-tall-storage-border-radius: var(--ti-common-border-radius-normal, 2px); + --ti-tall-storage-item-height: var(--ti-common-size-height-normal, 28px); + --ti-tall-storage-item-bg-color: var(--ti-common-color-hover-background, #f2f5fc); } diff --git a/packages/theme/src/text-popup/vars.less b/packages/theme/src/text-popup/vars.less index 694311186..027bfed26 100644 --- a/packages/theme/src/text-popup/vars.less +++ b/packages/theme/src/text-popup/vars.less @@ -12,23 +12,23 @@ .component-css-vars-text-popup() { // 输入框圆角 - --ti-text-popup-border-radius: var(--ti-common-border-radius-normal); + --ti-text-popup-border-radius: var(--ti-common-border-radius-normal, 2px); // 输入框高度 - --ti-text-popup-height: var(--ti-common-size-7x); + --ti-text-popup-height: var(--ti-common-size-7x, 28px); // 输入框字号 - --ti-text-popup-font-size: var(--ti-common-font-size-base); + --ti-text-popup-font-size: var(--ti-common-font-size-base, 12px); // 输入框字族 - --ti-text-popup-font-family: var(--ti-common-font-family); + --ti-text-popup-font-family: var(--ti-common-font-family, 'Helvetica', 'Arial', 'PingFangSC-Regular', 'Hiragino Sans GB', 'Microsoft YaHei', '微软雅黑', 'Microsoft JhengHei'); // 输入框边框色 - --ti-text-popup-border-color: var(--ti-common-color-border); + --ti-text-popup-border-color: var(--ti-common-color-border, #adb0b8); // 输入框聚焦展开时阴影 --ti-text-popup-box-shadow: 0 0 1px 1px rgba(175, 175, 175, 0.3); // 输入框悬浮边框色 - --ti-text-popup-hover-border-color: var(--ti-common-color-line-hover); + --ti-text-popup-hover-border-color: var(--ti-common-color-line-hover, #575d6c); //输入框聚焦边框色 - --ti-text-popup-focus-border-color: var(--ti-common-color-line-active); + --ti-text-popup-focus-border-color: var(--ti-common-color-line-active, #5e7ce0); // 输入框垂直内边距 - --ti-text-popup-padding-vertical: calc(var(--ti-common-space-2x) - 2px); + --ti-text-popup-padding-vertical: calc(var(--ti-common-space-2x, 8px) - 2px); // 输入框水平内边距 - --ti-text-popup-padding-horizontal: calc(var(--ti-common-space-2x) + 2px); + --ti-text-popup-padding-horizontal: calc(var(--ti-common-space-2x, 8px) + 2px); } diff --git a/packages/theme/src/textarea/vars.less b/packages/theme/src/textarea/vars.less index c9b32a1ac..88e0e0bf8 100644 --- a/packages/theme/src/textarea/vars.less +++ b/packages/theme/src/textarea/vars.less @@ -12,49 +12,49 @@ .component-css-vars-textarea() { // 文本域文本颜色 - --ti-textarea-text-color: var(--ti-common-color-text-primary); + --ti-textarea-text-color: var(--ti-common-color-text-primary, #252b3a); // 文本域背景颜色 - --ti-textarea-bg-color: var(--ti-common-color-icon-white); + --ti-textarea-bg-color: var(--ti-common-color-icon-white, #fff); // 文本域字体大小 - --ti-textarea-font-size: var(--ti-common-font-size-base); + --ti-textarea-font-size: var(--ti-common-font-size-base, 12px); // 文本域计数器字体大小 - --ti-textarea-count-font-size: var(--ti-common-font-size-base); + --ti-textarea-count-font-size: var(--ti-common-font-size-base, 12px); // 文本域高度 - --ti-textarea-height: var(--ti-common-size-height-normal); + --ti-textarea-height: var(--ti-common-size-height-normal, 28px); // 文本域边框圆角 - --ti-textarea-border-radius: var(--ti-common-border-radius-normal); + --ti-textarea-border-radius: var(--ti-common-border-radius-normal, 2px); // 文本域边框色 - --ti-textarea-border-color: var(--ti-common-color-border); + --ti-textarea-border-color: var(--ti-common-color-border, #adb0b8); // 文本域内层hover时显示的边框颜色 - --ti-textarea-inner-hover-border-color: var(--ti-common-color-border-hover); + --ti-textarea-inner-hover-border-color: var(--ti-common-color-border-hover, #575d6c); // 文本域内层active时显示的边框颜色 - --ti-textarea-inner-active-border-color: var(--ti-common-color-line-active); + --ti-textarea-inner-active-border-color: var(--ti-common-color-line-active, #5e7ce0); // 文本域占位符文本颜色 - --ti-textarea-placeholder-text-color: var(--ti-common-color-placeholder); + --ti-textarea-placeholder-text-color: var(--ti-common-color-placeholder, #adb0b8); // 文本域disabled时的文本颜色 - --ti-textarea-disabled-text-color: var(--ti-common-color-text-disabled); + --ti-textarea-disabled-text-color: var(--ti-common-color-text-disabled, #adb0b8); // 文本域disabled时的背景颜色 - --ti-textarea-disabled-bg-color: var(--ti-common-color-bg-disabled); + --ti-textarea-disabled-bg-color: var(--ti-common-color-bg-disabled, #f5f5f6); // 文本域exceed时的文本颜色 - --ti-textarea-exceed-text-color: var(--ti-common-bg-primary); + --ti-textarea-exceed-text-color: var(--ti-common-bg-primary, #c7000b); // 计数器的颜色 - --ti-textarea-count-color: var(--ti-common-color-text-weaken); + --ti-textarea-count-color: var(--ti-common-color-text-weaken, #8a8e99); // 文本框垂直方向内边距 - --ti-textarea-padding-vertical: var(--ti-common-space-2x); + --ti-textarea-padding-vertical: var(--ti-common-space-2x, 8px); // 文本框水平方向内边距 - --ti-textarea-padding-horizontal: var(--ti-common-space-2x); + --ti-textarea-padding-horizontal: var(--ti-common-space-2x, 8px); // 文本框右侧内边距 - --ti-textarea-padding-right: var(--ti-common-space-2x); + --ti-textarea-padding-right: var(--ti-common-space-2x, 8px); // 文本框底部内边距 - --ti-textarea-padding-bottom: var(--ti-common-space-2x); + --ti-textarea-padding-bottom: var(--ti-common-space-2x, 8px); // 计数器底部距离 --ti-textarea-count-bottom: 5px; // 计数器右侧距离 --ti-textarea-count-right: 16px; // 文本域hover时显示的边框颜色 - --ti-textarea-hover-border-color: var(--ti-common-color-border-hover); + --ti-textarea-hover-border-color: var(--ti-common-color-border-hover, #575d6c); // 文本域active时显示的边框颜色 - --ti-textarea-active-border-color: var(--ti-common-color-line-active); + --ti-textarea-active-border-color: var(--ti-common-color-line-active, #5e7ce0); // 计数器宽度 --ti-textarea-count-width: auto; // 文本域宽度 @@ -62,11 +62,11 @@ // 计数器圆角 --ti-textarea-count-border-radius: 0; // 计数器文本字数颜色 - --ti-textarea-count-text-length-color: var(--ti-common-color-text-weaken); + --ti-textarea-count-text-length-color: var(--ti-common-color-text-weaken, #8a8e99); // 计数器右侧内边距 - --ti-textarea-count-padding-right: var(--ti-common-space-0); + --ti-textarea-count-padding-right: var(--ti-common-space-0, 0px); // 文本框字体 - --ti-textarea-font-family: var(--ti-common-font-family); + --ti-textarea-font-family: var(--ti-common-font-family, 'Helvetica', 'Arial', 'PingFangSC-Regular', 'Hiragino Sans GB', 'Microsoft YaHei', '微软雅黑', 'Microsoft JhengHei'); // 计数器行高 --ti-textarea-count-line-height: var(--ti-textarea-count-font-size); } diff --git a/packages/theme/src/time-panel/vars.less b/packages/theme/src/time-panel/vars.less index 9c429deca..1223814be 100644 --- a/packages/theme/src/time-panel/vars.less +++ b/packages/theme/src/time-panel/vars.less @@ -18,15 +18,15 @@ --ti-time-panel-btn-bg-color: transparent; --ti-time-panel-btn-padding-vertical: 0; --ti-time-panel-btn-padding-horizontal: 5px; - --ti-time-panel-btn-border-radius: var(--ti-common-border-radius-normal); + --ti-time-panel-btn-border-radius: var(--ti-common-border-radius-normal, 2px); --ti-time-panel-btn-height: 28px; --ti-time-panel-btn-min-width: inherit; --ti-time-panel-btn-font-weight: 800; --ti-time-panel-btn-confirm-hover-bg-color: transparent; --ti-time-panel-footer-height: 36px; --ti-time-panel-btn-text-color: #303133; - --ti-time-panel-btn-confirm-text-color: var(--ti-base-color-brand-7); - --ti-time-panel-bg-color: var(--ti-common-color-light); - --ti-time-panel-border-radius: var(--ti-common-border-radius-normal); - --ti-time-panel-border-color: var(--ti-common-color-line-dividing); + --ti-time-panel-btn-confirm-text-color: var(--ti-base-color-brand-7, #526ecc); + --ti-time-panel-bg-color: var(--ti-common-color-light, #fff); + --ti-time-panel-border-radius: var(--ti-common-border-radius-normal, 2px); + --ti-time-panel-border-color: var(--ti-common-color-line-dividing, #dfe1e6); } diff --git a/packages/theme/src/time-range/vars.less b/packages/theme/src/time-range/vars.less index cdf0ce938..bd3482d1c 100644 --- a/packages/theme/src/time-range/vars.less +++ b/packages/theme/src/time-range/vars.less @@ -11,5 +11,5 @@ */ .component-css-vars-time-range-picker() { - --ti-time-range-picker-header-font-size: var(--ti-common-font-size-1); + --ti-time-range-picker-header-font-size: var(--ti-common-font-size-1, 14px); } diff --git a/packages/theme/src/time-select/vars.less b/packages/theme/src/time-select/vars.less index 372b2c723..69f82576c 100644 --- a/packages/theme/src/time-select/vars.less +++ b/packages/theme/src/time-select/vars.less @@ -12,17 +12,17 @@ .component-css-vars-time-select() { // 时间选择选项高度 - --ti-time-select-item-height: var(--ti-common-size-height-normal); + --ti-time-select-item-height: var(--ti-common-size-height-normal, 28px); // 时间选择选项字体色 - --ti-time-select-item-text-color: var(--ti-common-color-text-primary); + --ti-time-select-item-text-color: var(--ti-common-color-text-primary, #252b3a); // 时间选择选项字号 - --ti-time-select-item-font-size: var(--ti-common-font-size-base); + --ti-time-select-item-font-size: var(--ti-common-font-size-base, 12px); // 时间选择选项行高 - --ti-time-select-item-line-height: var(--ti-common-size-height-normal); + --ti-time-select-item-line-height: var(--ti-common-size-height-normal, 28px); // 时间选择选项左右内边距 - --ti-time-select-item-padding-horizontal: var(--ti-common-size-2x); + --ti-time-select-item-padding-horizontal: var(--ti-common-size-2x, 8px); // 时间选择选项悬浮背景色 - --ti-time-select-item-hover-bg-color: var(--ti-common-color-selected-background); + --ti-time-select-item-hover-bg-color: var(--ti-common-color-selected-background, #5e7ce0); // 时间选择选项禁用文本色 - --ti-time-select-item-disabled-text-color: var(--ti-common-color-text-disabled); + --ti-time-select-item-disabled-text-color: var(--ti-common-color-text-disabled, #adb0b8); } diff --git a/packages/theme/src/time-spinner/vars.less b/packages/theme/src/time-spinner/vars.less index a1c930e4f..aa2d224c4 100644 --- a/packages/theme/src/time-spinner/vars.less +++ b/packages/theme/src/time-spinner/vars.less @@ -12,14 +12,14 @@ .component-css-vars-time-spinner() { --ti-time-spinner-arrow-text-color: #909399; - --ti-time-spinner-arrow-hover-text-color: var(--ti-base-color-brand-7); + --ti-time-spinner-arrow-hover-text-color: var(--ti-base-color-brand-7, #526ecc); --ti-time-spinner-item-active-text-color: #303133; --ti-time-spinner-item-font-weight: 700; --ti-time-spinner-item-bg-color: transparent; --ti-time-spinner-list-border-color: transparent; - --ti-time-spinner-font-size: var(--ti-common-font-size-base); + --ti-time-spinner-font-size: var(--ti-common-font-size-base, 12px); --ti-time-spinner-text-color: var(--ti-base-color-info-normal); --ti-time-spinner-bg-color: var(--ti-base-color-light); --ti-time-spinner-selected-bg-color: #f2f2f3; - --ti-time-spinner-disabled-text-color: var(--ti-common-color-text-disabled); + --ti-time-spinner-disabled-text-color: var(--ti-common-color-text-disabled, #adb0b8); } diff --git a/packages/theme/src/tip/vars.less b/packages/theme/src/tip/vars.less index 744b58ab9..2198c6439 100644 --- a/packages/theme/src/tip/vars.less +++ b/packages/theme/src/tip/vars.less @@ -11,22 +11,22 @@ */ .component-css-vars-tip() { - --ti-tips-normal-bg-color: var(--ti-common-color-bg-dark-deep); - --ti-tips-normal-text-color: var(--ti-common-color-light); + --ti-tips-normal-bg-color: var(--ti-common-color-bg-dark-deep, #464c59); + --ti-tips-normal-text-color: var(--ti-common-color-light, #fff); --ti-tips-error-bg-color: #ff7875; - --ti-tips-error-text-color: var(--ti-common-color-light); + --ti-tips-error-text-color: var(--ti-common-color-light, #fff); - --ti-tips-succeed-bg-color: var(--ti-common-color-success-normal); - --ti-tips-succeed-text-color: var(--ti-common-color-light); + --ti-tips-succeed-bg-color: var(--ti-common-color-success-normal, #50d4ab); + --ti-tips-succeed-text-color: var(--ti-common-color-light, #fff); --ti-tips-warning-bg-color: #fa8c16; - --ti-tips-warning-text-color: var(--ti-common-color-light); + --ti-tips-warning-text-color: var(--ti-common-color-light, #fff); - --ti-tips-infor-bg-color: var(--ti-common-color-border); - --ti-tips-infor-text-color: var(--ti-common-color-info-normal); + --ti-tips-infor-bg-color: var(--ti-common-color-border, #adb0b8); + --ti-tips-infor-text-color: var(--ti-common-color-info-normal, #252b3a); --ti-tips-bg-color: #ff7875; - --ti-tips-border-radius: var(--ti-common-border-radius-normal); + --ti-tips-border-radius: var(--ti-common-border-radius-normal, 2px); --ti-tips-height: 26px; } diff --git a/packages/theme/src/toggle-menu/vars.less b/packages/theme/src/toggle-menu/vars.less index f7023732e..c5573a0f8 100644 --- a/packages/theme/src/toggle-menu/vars.less +++ b/packages/theme/src/toggle-menu/vars.less @@ -12,23 +12,23 @@ .component-css-vars-toggle-menu() { // 收缩菜单宽度 - --ti-toggle-menu-width: var(--ti-common-size-50x); + --ti-toggle-menu-width: var(--ti-common-size-50x, 200px); // 收缩菜单字号 - --ti-toggle-menu-font-size: var(--ti-common-font-size-base); + --ti-toggle-menu-font-size: var(--ti-common-font-size-base, 12px); // 收缩菜单列表文本色 - --ti-toggle-menu-name-text-color: var(--ti-common-color-text-primary); + --ti-toggle-menu-name-text-color: var(--ti-common-color-text-primary, #252b3a); // 收缩菜单列表项高度 - --ti-toggle-menu-tree-node-height: var(--ti-common-size-7x); + --ti-toggle-menu-tree-node-height: var(--ti-common-size-7x, 28px); // 收缩菜单收缩搜索高度 - --ti-toggle-menu-filter-search-size: var(--ti-common-size-7x); + --ti-toggle-menu-filter-search-size: var(--ti-common-size-7x, 28px); // 收缩菜单输入框搜索图标尺寸 - --ti-toggle-menu-filter-search-font-size: var(--ti-common-font-size-2); + --ti-toggle-menu-filter-search-font-size: var(--ti-common-font-size-2, 16px); // 收缩菜单搜索图标色 - --ti-toggle-menu-filter-search-icon-color: var(--ti-base-color-brand-6); + --ti-toggle-menu-filter-search-icon-color: var(--ti-base-color-brand-6, #5e7ce0); // 收缩菜单收缩图标色 - --ti-toggle-menu-toggle-icon-color: var(--ti-base-color-brand-6); + --ti-toggle-menu-toggle-icon-color: var(--ti-base-color-brand-6, #5e7ce0); // 收缩菜单收缩图标悬浮色 - --ti-toggle-menu-toggle-icon-color-hover: var(--ti-common-color-primary-hover); + --ti-toggle-menu-toggle-icon-color-hover: var(--ti-common-color-primary-hover, #7693f5); // 收缩菜单收缩按钮背景色 - --ti-toggle-menu-toggle-bg-color: var(--ti-common-color-border); + --ti-toggle-menu-toggle-bg-color: var(--ti-common-color-border, #adb0b8); } diff --git a/packages/theme/src/tooltip/vars.less b/packages/theme/src/tooltip/vars.less index 5c845d59a..21419292f 100644 --- a/packages/theme/src/tooltip/vars.less +++ b/packages/theme/src/tooltip/vars.less @@ -16,68 +16,68 @@ // 弹框箭头的负尺寸,用于偏移(hide) --ti-tooltip-popper-neg-border-width: calc(var(--ti-tooltip-popper-border-width) * -1); // 弹框字体行高(hide) - --ti-tooltip-popper-font-line-height: var(--ti-common-line-height-3); + --ti-tooltip-popper-font-line-height: var(--ti-common-line-height-3, 18px); // 弹框字体(hide) - --ti-tooltip-popper-font-family: var(--ti-common-font-family); + --ti-tooltip-popper-font-family: var(--ti-common-font-family, 'Helvetica', 'Arial', 'PingFangSC-Regular', 'Hiragino Sans GB', 'Microsoft YaHei', '微软雅黑', 'Microsoft JhengHei'); // 悬浮弹出框圆角 - --ti-tooltip-popper-border-radius: var(--ti-common-border-radius-1); + --ti-tooltip-popper-border-radius: var(--ti-common-border-radius-1, 4px); // 悬浮弹出框字号 - --ti-tooltip-popper-font-size: var(--ti-common-font-size-base); + --ti-tooltip-popper-font-size: var(--ti-common-font-size-base, 12px); // 弹框三角默认边框色 - --ti-tooltip-popper-border-color: var(--ti-common-color-bg-dark-deep); + --ti-tooltip-popper-border-color: var(--ti-common-color-bg-dark-deep, #464c59); // 正常背景色 (hide) - --ti-tooltip-popper-normal-bg-color: var(--ti-common-color-bg-dark-deep); + --ti-tooltip-popper-normal-bg-color: var(--ti-common-color-bg-dark-deep, #464c59); // 文字提示正常文本色(hide) --ti-tooltip-popper-normal-text-color: var(--ti-tooltip-popper-dark-text-color); // 弹框正常边框色 (hide) - --ti-tooltip-popper-normal-border-color: var(--ti-common-color-bg-dark-deep); + --ti-tooltip-popper-normal-border-color: var(--ti-common-color-bg-dark-deep, #464c59); // info类型弹框背景色 - --ti-tooltip-popper-info-bg-color: var(--ti-common-color-prompt-border); + --ti-tooltip-popper-info-bg-color: var(--ti-common-color-prompt-border, #beccfa); // info类型弹框文本色 - --ti-tooltip-popper-info-text-color: var(--ti-common-color-light); + --ti-tooltip-popper-info-text-color: var(--ti-common-color-light, #fff); // info类型弹框三角边框色 - --ti-tooltip-popper-info-border-color: var(--ti-common-color-prompt-border); + --ti-tooltip-popper-info-border-color: var(--ti-common-color-prompt-border, #beccfa); // error类型弹框背景色 - --ti-tooltip-popper-error-bg-color: var(--ti-common-color-danger-normal); + --ti-tooltip-popper-error-bg-color: var(--ti-common-color-danger-normal, #c7000b); // error类型弹框文本色 - --ti-tooltip-popper-error-text-color: var(--ti-common-color-light); + --ti-tooltip-popper-error-text-color: var(--ti-common-color-light, #fff); // error类型弹框三角边框色 - --ti-tooltip-popper-error-border-color: var(--ti-common-color-danger-normal); + --ti-tooltip-popper-error-border-color: var(--ti-common-color-danger-normal, #c7000b); // warning类型弹框背景色 - --ti-tooltip-popper-warning-bg-color: var(--ti-common-color-warning-normal); + --ti-tooltip-popper-warning-bg-color: var(--ti-common-color-warning-normal, #fa9841); // warning类型弹框文本色 - --ti-tooltip-popper-warning-text-color: var(--ti-common-color-light); + --ti-tooltip-popper-warning-text-color: var(--ti-common-color-light, #fff); // warning类型弹框三角边框色 - --ti-tooltip-popper-warning-border-color: var(--ti-common-color-warning-normal); + --ti-tooltip-popper-warning-border-color: var(--ti-common-color-warning-normal, #fa9841); // success类型弹框背景色 - --ti-tooltip-popper-success-bg-color: var(--ti-common-color-success-normal); + --ti-tooltip-popper-success-bg-color: var(--ti-common-color-success-normal, #50d4ab); // success类型弹框文本色 - --ti-tooltip-popper-success-text-color: var(--ti-common-color-light); + --ti-tooltip-popper-success-text-color: var(--ti-common-color-light, #fff); // success类型弹框三角边框色 - --ti-tooltip-popper-success-border-color: var(--ti-common-color-success-normal); + --ti-tooltip-popper-success-border-color: var(--ti-common-color-success-normal, #50d4ab); // dark主题弹框背景色 - --ti-tooltip-popper-dark-bg-color: var(--ti-common-color-bg-dark-deep); + --ti-tooltip-popper-dark-bg-color: var(--ti-common-color-bg-dark-deep, #464c59); // dark主题弹框文本色 - --ti-tooltip-popper-dark-text-color: var(--ti-common-color-light); + --ti-tooltip-popper-dark-text-color: var(--ti-common-color-light, #fff); // light主题弹框背景色 - --ti-tooltip-popper-light-bg-color: var(--ti-common-color-light); + --ti-tooltip-popper-light-bg-color: var(--ti-common-color-light, #fff); // light主题|禁用弹框文本色 - --ti-tooltip-popper-light-text-color: var(--ti-common-color-bg-dark-deep); + --ti-tooltip-popper-light-text-color: var(--ti-common-color-bg-dark-deep, #464c59); // light主题|禁用时弹框边框色 - --ti-tooltip-popper-light-border-color: var(--ti-common-color-bg-dark-deep); + --ti-tooltip-popper-light-border-color: var(--ti-common-color-bg-dark-deep, #464c59); // 弹框阴影 - --ti-tooltip-box-shadow: var(--ti-common-shadow-3-down); + --ti-tooltip-box-shadow: var(--ti-common-shadow-3-down, 0 4px 16px 0 rgba(0, 0, 0, 0.2)); // 弹框垂直内边距 - --ti-tooltip-padding-vertical: var(--ti-common-space-3x); + --ti-tooltip-padding-vertical: var(--ti-common-space-3x, 12px); // 弹框水平内边距 - --ti-tooltip-padding-horizontal: var(--ti-common-space-4x); + --ti-tooltip-padding-horizontal: var(--ti-common-space-4x, 16px); // 文字提示错误图标色 - --ti-tooltip-validate-icon-color: var(--ti-common-color-error); + --ti-tooltip-validate-icon-color: var(--ti-common-color-error, #f66f6a); } diff --git a/packages/theme/src/top-box/vars.less b/packages/theme/src/top-box/vars.less index 73ab56d12..96c9738aa 100644 --- a/packages/theme/src/top-box/vars.less +++ b/packages/theme/src/top-box/vars.less @@ -11,11 +11,11 @@ */ .component-css-vars-top-box() { - --ti-top-box-bg-color: var(--ti-common-color-light); - --ti-top-box-icon-font-size: var(--ti-common-font-size-5); - --ti-top-box-success-icon-color: var(--ti-common-color-success-normal); - --ti-top-box-error-icon-color: var(--ti-base-color-bg-8); - --ti-top-box-warning-icon-color: var(--ti-common-color-warning-normal); - --ti-top-box-help-icon-color: var(--ti-base-color-brand-6); - --ti-top-box-info-icon-color: var(--ti-common-color-info-normal); + --ti-top-box-bg-color: var(--ti-common-color-light, #fff); + --ti-top-box-icon-font-size: var(--ti-common-font-size-5, 24px); + --ti-top-box-success-icon-color: var(--ti-common-color-success-normal, #50d4ab); + --ti-top-box-error-icon-color: var(--ti-base-color-bg-8, #c7000b); + --ti-top-box-warning-icon-color: var(--ti-common-color-warning-normal, #fa9841); + --ti-top-box-help-icon-color: var(--ti-base-color-brand-6, #5e7ce0); + --ti-top-box-info-icon-color: var(--ti-common-color-info-normal, #252b3a); } diff --git a/packages/theme/src/transfer/vars.less b/packages/theme/src/transfer/vars.less index c954b0aae..c8487ed6c 100644 --- a/packages/theme/src/transfer/vars.less +++ b/packages/theme/src/transfer/vars.less @@ -12,229 +12,229 @@ .component-css-vars-transfer() { // 字体基础大小 - --ti-transfer-font-size: var(--ti-common-font-size-1); + --ti-transfer-font-size: var(--ti-common-font-size-1, 14px); // 按钮组左侧内边距 - --ti-transfer-buttons-padding-left: var(--ti-common-space-4x); + --ti-transfer-buttons-padding-left: var(--ti-common-space-4x, 16px); // 按钮组右侧内边距 - --ti-transfer-buttons-padding-right: var(--ti-common-space-4x); + --ti-transfer-buttons-padding-right: var(--ti-common-space-4x, 16px); // 按钮组顶部内边距 - --ti-transfer-buttons-padding-top: var(--ti-common-space-0); + --ti-transfer-buttons-padding-top: var(--ti-common-space-0, 0px); // 按钮组底部内边距 - --ti-transfer-buttons-padding-bottom: var(--ti-common-space-0); + --ti-transfer-buttons-padding-bottom: var(--ti-common-space-0, 0px); // 按钮组默认按钮组左侧外边距 - --ti-transfer-buttons-defaultButton-margin-left: var(--ti-common-space-0); + --ti-transfer-buttons-defaultButton-margin-left: var(--ti-common-space-0, 0px); // 按钮组默认按钮组右侧外边距 - --ti-transfer-buttons-defaultButton-margin-right: var(--ti-common-space-0); + --ti-transfer-buttons-defaultButton-margin-right: var(--ti-common-space-0, 0px); // 按钮组默认按钮组顶部外边距 - --ti-transfer-buttons-defaultButton-margin-top: var(--ti-common-space-3x); + --ti-transfer-buttons-defaultButton-margin-top: var(--ti-common-space-3x, 12px); // 按钮组默认按钮组底部外边距 - --ti-transfer-buttons-defaultButton-margin-bottom: var(--ti-common-space-0); + --ti-transfer-buttons-defaultButton-margin-bottom: var(--ti-common-space-0, 0px); // 按钮组左侧外边距 - --ti-transfer-buttons-margin-left: var(--ti-common-space-0); + --ti-transfer-buttons-margin-left: var(--ti-common-space-0, 0px); // 按钮组右侧外边距 - --ti-transfer-buttons-margin-right: var(--ti-common-space-0); + --ti-transfer-buttons-margin-right: var(--ti-common-space-0, 0px); // 按钮组顶部外边距 - --ti-transfer-buttons-margin-top: var(--ti-common-space-0); + --ti-transfer-buttons-margin-top: var(--ti-common-space-0, 0px); // 按钮组底部外边距 - --ti-transfer-buttons-margin-bottom: var(--ti-common-space-2x); + --ti-transfer-buttons-margin-bottom: var(--ti-common-space-2x, 8px); // 按钮左侧外边距 --ti-transfer-button-margin-left: auto; // 按钮右侧外边距 --ti-transfer-button-margin-right: auto; // 按钮顶部外边距 - --ti-transfer-button-margin-top: var(--ti-common-space-0); + --ti-transfer-button-margin-top: var(--ti-common-space-0, 0px); // 按钮底部外边距 - --ti-transfer-button-margin-bottom: var(--ti-common-space-0); + --ti-transfer-button-margin-bottom: var(--ti-common-space-0, 0px); // 按钮背景色 - --ti-transfer-button-bg-color: var(--ti-common-color-bg-emphasize); + --ti-transfer-button-bg-color: var(--ti-common-color-bg-emphasize, #5e7ce0); // 按钮左侧内边距 - --ti-transfer-button-padding-left: var(--ti-common-space-2x); + --ti-transfer-button-padding-left: var(--ti-common-space-2x, 8px); // 按钮右侧内边距 - --ti-transfer-button-padding-right: var(--ti-common-space-2x); + --ti-transfer-button-padding-right: var(--ti-common-space-2x, 8px); // 按钮顶部内边距 - --ti-transfer-button-padding-top: var(--ti-common-space-2x); + --ti-transfer-button-padding-top: var(--ti-common-space-2x, 8px); // 按钮底部内边距 - --ti-transfer-button-padding-bottom: var(--ti-common-space-2x); + --ti-transfer-button-padding-bottom: var(--ti-common-space-2x, 8px); // 按钮圆角 - --ti-transfer-button-border-radius: var(--ti-common-border-radius-normal); + --ti-transfer-button-border-radius: var(--ti-common-border-radius-normal, 2px); // 按钮禁用时文本色 - --ti-transfer-button-disabled-text-color: var(--ti-common-color-text-disabled); + --ti-transfer-button-disabled-text-color: var(--ti-common-color-text-disabled, #adb0b8); // 按钮禁用时边框色 - --ti-transfer-button-disabled-border-color: var(--ti-common-color-line-normal); + --ti-transfer-button-disabled-border-color: var(--ti-common-color-line-normal, #adb0b8); // 按钮禁用时背景色 - --ti-transfer-button-disabled-bg-color: var(--ti-common-color-bg-disabled); + --ti-transfer-button-disabled-bg-color: var(--ti-common-color-bg-disabled, #f5f5f6); // 按钮禁用时行高 --ti-transfer-button-disabled-line-height: 1; // 第一个按钮的底部外边距 - --ti-transfer-first-button-margin-bottom: var(--ti-common-space-3x); + --ti-transfer-first-button-margin-bottom: var(--ti-common-space-3x, 12px); // 面板背景色 - --ti-transfer-panel-bg-color: var(--ti-common-color-bg-white-normal); + --ti-transfer-panel-bg-color: var(--ti-common-color-bg-white-normal, #fff); // 面板内容区域高度 --ti-transfer-panel-body-height: 260px; // 面板内容区域边框色 - --ti-transfer-panel-border-color: var(--ti-common-color-line-normal); + --ti-transfer-panel-border-color: var(--ti-common-color-line-normal, #adb0b8); // 面板内容区域边框圆角 - --ti-transfer-panel-border-radius: var(--ti-common-border-radius-normal); + --ti-transfer-panel-border-radius: var(--ti-common-border-radius-normal, 2px); // 面板高度 --ti-transfer-panel-item-height: 30px; // 面板文本色 - --ti-transfer-panel-item-text-color: var(--ti-common-color-info-normal); + --ti-transfer-panel-item-text-color: var(--ti-common-color-info-normal, #252b3a); // 面板悬浮时文本色 - --ti-transfer-panel-item-hover-text-color: var(--ti-common-color-icon-hover); + --ti-transfer-panel-item-hover-text-color: var(--ti-common-color-icon-hover, #5e7ce0); // 面板悬浮时背景色 - --ti-transfer-panel-item-hover-bg-color: var(--ti-common-color-hover-background); + --ti-transfer-panel-item-hover-bg-color: var(--ti-common-color-hover-background, #f2f5fc); // 面板搜索框高度 - --ti-transfer-panel-filter-height: var(--ti-common-size-height-normal); + --ti-transfer-panel-filter-height: var(--ti-common-size-height-normal, 28px); // 面板搜索框字体大小 - --ti-transfer-panel-filter-font-size: var(--ti-common-font-size-base); + --ti-transfer-panel-filter-font-size: var(--ti-common-font-size-base, 12px); // 面板搜索框边框圆角 - --ti-transfer-panel-filter-border-radius: var(--ti-common-border-radius-normal); + --ti-transfer-panel-filter-border-radius: var(--ti-common-border-radius-normal, 2px); // 面板内容区域过滤后列表高度 - --ti-transfer-panel-body-filter-height: calc(var(--ti-common-size-50x) + 16px); + --ti-transfer-panel-body-filter-height: calc(var(--ti-common-size-50x, 200px) + 16px); // 面板内容区域右内边距 - --ti-transfer-panel-body-padding-right: calc(var(--ti-common-space-1) + 1px); + --ti-transfer-panel-body-padding-right: calc(var(--ti-common-space-1, 1px) + 1px); // 面板内容区域存在底部时的内边距 - --ti-transfer-panel-body-footer-padding-bottom: var(--ti-common-space-10x); + --ti-transfer-panel-body-footer-padding-bottom: var(--ti-common-space-10x, 40px); // 面板内容区域存在底部时的高度 --ti-transfer-panel-body-footer-height: calc(100% - 40px); // 面板宽度 - --ti-transfer-panel-width: var(--ti-common-size-50x); + --ti-transfer-panel-width: var(--ti-common-size-50x, 200px); // 面板头部高度 - --ti-transfer-header-height: var(--ti-common-size-10x); + --ti-transfer-header-height: var(--ti-common-size-10x, 40px); // 面板头部背景色 - --ti-transfer-header-bg-color: var(--ti-common-color-bg-white-emphasize); + --ti-transfer-header-bg-color: var(--ti-common-color-bg-white-emphasize, #f2f5fc); // 面板头部边框色 - --ti-transfer-header-border-color: var(--ti-common-color-line-normal); + --ti-transfer-header-border-color: var(--ti-common-color-line-normal, #adb0b8); // 面板头部文本色 - --ti-transfer-header-text-color: var(--ti-common-color-info-normal); + --ti-transfer-header-text-color: var(--ti-common-color-info-normal, #252b3a); // 面板头部span文本色 - --ti-transfer-header-span-text-color: var(--ti-common-color-info-normal); + --ti-transfer-header-span-text-color: var(--ti-common-color-info-normal, #252b3a); // 面板头部字体大小 - --ti-transfer-header-font-size: var(--ti-common-font-size-base); + --ti-transfer-header-font-size: var(--ti-common-font-size-base, 12px); // 面板头部排序图标宽度 - --ti-transfer-header-sort-width: var(--ti-common-size-5x); + --ti-transfer-header-sort-width: var(--ti-common-size-5x, 20px); // 面板头部排序图标文本色 - --ti-transfer-header-sort-text-color: var(--ti-common-color-bg-emphasize); + --ti-transfer-header-sort-text-color: var(--ti-common-color-bg-emphasize, #5e7ce0); // 面板底部高度 - --ti-transfer-footer-height: var(--ti-common-size-10x); + --ti-transfer-footer-height: var(--ti-common-size-10x, 40px); // 面板底部背景色 - --ti-transfer-footer-bg-color: var(--ti-common-color-bg-white-normal); + --ti-transfer-footer-bg-color: var(--ti-common-color-bg-white-normal, #fff); // 面板底部边框色 - --ti-transfer-footer-border-color: var(--ti-common-color-line-normal); + --ti-transfer-footer-border-color: var(--ti-common-color-line-normal, #adb0b8); // 面板内容区域列表为空时显示的文本高度 --ti-transfer-empty-height: var(--ti-common-size-height-minor); // 面板内容区域列表为空时显示的文本色 - --ti-transfer-empty-text-color: var(--ti-common-color-text-weaken); + --ti-transfer-empty-text-color: var(--ti-common-color-text-weaken, #8a8e99); // 面板内容区域为嵌套树样式时的高度 --ti-transfer-panel-body-tree-height: 100%; // 面板内容区域为嵌套树样式时的左侧内边距 - --ti-transfer-panel-body-tree-padding-left: var(--ti-common-space-2x); + --ti-transfer-panel-body-tree-padding-left: var(--ti-common-space-2x, 8px); // 面板内容区域为嵌套树样式时的右侧内边距 - --ti-transfer-panel-body-tree-padding-right: var(--ti-common-space-2x); + --ti-transfer-panel-body-tree-padding-right: var(--ti-common-space-2x, 8px); // 面板内容区域为嵌套树样式时的顶部内边距 - --ti-transfer-panel-body-tree-padding-top: var(--ti-common-space-0); + --ti-transfer-panel-body-tree-padding-top: var(--ti-common-space-0, 0px); // 面板内容区域为嵌套树样式时的底部内边距 - --ti-transfer-panel-body-tree-padding-bottom: var(--ti-common-space-2x); + --ti-transfer-panel-body-tree-padding-bottom: var(--ti-common-space-2x, 8px); // 面板内容区域为嵌套树样式时搜索框过滤后的高度 --ti-transfer-panel-body-tree-filter-height: calc(100% - 46px); // 面板内容区域列表的左侧外边距 - --ti-transfer-panel-body-list-margin-left: var(--ti-common-space-0); + --ti-transfer-panel-body-list-margin-left: var(--ti-common-space-0, 0px); // 面板内容区域列表的右侧外边距 - --ti-transfer-panel-body-list-margin-right: var(--ti-common-space-0); + --ti-transfer-panel-body-list-margin-right: var(--ti-common-space-0, 0px); // 面板内容区域列表的顶部外边距 - --ti-transfer-panel-body-list-margin-top: var(--ti-common-space-0); + --ti-transfer-panel-body-list-margin-top: var(--ti-common-space-0, 0px); // 面板内容区域列表的底部外边距 - --ti-transfer-panel-body-list-margin-bottom: var(--ti-common-space-0); + --ti-transfer-panel-body-list-margin-bottom: var(--ti-common-space-0, 0px); // 面板内容区域列表的左侧内边距 - --ti-transfer-panel-body-list-padding-left: var(--ti-common-space-0); + --ti-transfer-panel-body-list-padding-left: var(--ti-common-space-0, 0px); // 面板内容区域列表的右侧内边距 - --ti-transfer-panel-body-list-padding-right: var(--ti-common-space-0); + --ti-transfer-panel-body-list-padding-right: var(--ti-common-space-0, 0px); // 面板内容区域列表的顶部内边距 - --ti-transfer-panel-body-list-padding-top: var(--ti-common-space-6); + --ti-transfer-panel-body-list-padding-top: var(--ti-common-space-6, 6px); // 面板内容区域列表的底部内边距 - --ti-transfer-panel-body-list-padding-bottom: var(--ti-common-space-6); + --ti-transfer-panel-body-list-padding-bottom: var(--ti-common-space-6, 6px); // 面板内容区域过滤后顶部内边距 - --ti-transfer-panel-body-filter-padding-top: var(--ti-common-space-0); + --ti-transfer-panel-body-filter-padding-top: var(--ti-common-space-0, 0px); // 面板左侧内边距 - --ti-transfer-panel-item-padding-left: var(--ti-common-space-2x); + --ti-transfer-panel-item-padding-left: var(--ti-common-space-2x, 8px); // 面板多选框左侧内边距 - --ti-transfer-panel-item-checkbox-padding-left: calc(var(--ti-common-space-5x) + 2px); + --ti-transfer-panel-item-checkbox-padding-left: calc(var(--ti-common-space-5x, 20px) + 2px); // 面板搜索框左侧内边距 - --ti-transfer-panel-filter-padding-left: var(--ti-common-space-2x); + --ti-transfer-panel-filter-padding-left: var(--ti-common-space-2x, 8px); // 面板搜索框右侧内边距 - --ti-transfer-panel-filter-padding-right: var(--ti-common-space-2x); + --ti-transfer-panel-filter-padding-right: var(--ti-common-space-2x, 8px); // 面板搜索框顶部内边距 - --ti-transfer-panel-filter-padding-top: var(--ti-common-space-2x); + --ti-transfer-panel-filter-padding-top: var(--ti-common-space-2x, 8px); // 面板搜索框底部内边距 - --ti-transfer-panel-filter-padding-bottom: var(--ti-common-space-2x); + --ti-transfer-panel-filter-padding-bottom: var(--ti-common-space-2x, 8px); // 面板搜索框的输入框右侧内边距 - --ti-transfer-panel-filter-input-padding-right: calc(var(--ti-common-space-8x) - 2px); + --ti-transfer-panel-filter-input-padding-right: calc(var(--ti-common-space-8x, 32px) - 2px); // 面板搜索框的输入框左侧内边距 - --ti-transfer-panel-filter-input-padding-left: var(--ti-common-space-2x); + --ti-transfer-panel-filter-input-padding-left: var(--ti-common-space-2x, 8px); // 头部左侧外边距 - --ti-transfer-header-margin-left: var(--ti-common-space-0); + --ti-transfer-header-margin-left: var(--ti-common-space-0, 0px); // 头部右侧外边距 - --ti-transfer-header-margin-right: var(--ti-common-space-0); + --ti-transfer-header-margin-right: var(--ti-common-space-0, 0px); // 头部顶部外边距 - --ti-transfer-header-margin-top: var(--ti-common-space-0); + --ti-transfer-header-margin-top: var(--ti-common-space-0, 0px); // 头部底部外边距 - --ti-transfer-header-margin-bottom: var(--ti-common-space-0); + --ti-transfer-header-margin-bottom: var(--ti-common-space-0, 0px); // 头部左侧内边距 - --ti-transfer-header-padding-left: var(--ti-common-space-2x); + --ti-transfer-header-padding-left: var(--ti-common-space-2x, 8px); // 头部右侧内边距 - --ti-transfer-header-padding-right: var(--ti-common-space-2x); + --ti-transfer-header-padding-right: var(--ti-common-space-2x, 8px); // 头部顶部内边距 - --ti-transfer-header-padding-top: var(--ti-common-space-0); + --ti-transfer-header-padding-top: var(--ti-common-space-0, 0px); // 头部底部内边距 - --ti-transfer-header-padding-bottom: var(--ti-common-space-0); + --ti-transfer-header-padding-bottom: var(--ti-common-space-0, 0px); // 面板头部span字重 - --ti-transfer-header-span-font-weight: var(--ti-common-font-weight-4); + --ti-transfer-header-span-font-weight: var(--ti-common-font-weight-4, normal); // 面板头部排序图标右侧外边距 - --ti-transfer-header-sort-margin-right: var(--ti-common-space-2x); + --ti-transfer-header-sort-margin-right: var(--ti-common-space-2x, 8px); // 面板头部排序图标边框圆角 --ti-transfer-header-sort-border-radius: 50%; // 面板底部左侧外边距 - --ti-transfer-footer-margin-left: var(--ti-common-space-0); + --ti-transfer-footer-margin-left: var(--ti-common-space-0, 0px); // 面板底部右侧外边距 - --ti-transfer-footer-margin-right: var(--ti-common-space-0); + --ti-transfer-footer-margin-right: var(--ti-common-space-0, 0px); // 面板底部的顶部外边距 - --ti-transfer-footer-margin-top: var(--ti-common-space-0); + --ti-transfer-footer-margin-top: var(--ti-common-space-0, 0px); // 面板底部的底部外边距 - --ti-transfer-footer-margin-bottom: var(--ti-common-space-0); + --ti-transfer-footer-margin-bottom: var(--ti-common-space-0, 0px); // 面板底部左侧内边距 - --ti-transfer-footer-padding-left: var(--ti-common-space-0); + --ti-transfer-footer-padding-left: var(--ti-common-space-0, 0px); // 面板底部右侧内边距 - --ti-transfer-footer-padding-right: var(--ti-common-space-0); + --ti-transfer-footer-padding-right: var(--ti-common-space-0, 0px); // 面板底部的顶部内边距 - --ti-transfer-footer-padding-top: var(--ti-common-space-0); + --ti-transfer-footer-padding-top: var(--ti-common-space-0, 0px); // 面板底部的底部内边距 - --ti-transfer-footer-padding-bottom: var(--ti-common-space-0); + --ti-transfer-footer-padding-bottom: var(--ti-common-space-0, 0px); // 面板底部复选框左侧内边距 - --ti-transfer-footer-checkbox-padding-left: var(--ti-common-space-5x); + --ti-transfer-footer-checkbox-padding-left: var(--ti-common-space-5x, 20px); // 面板内容区域列表为空时显示的无数据文本的顶部内边距 - --ti-transfer-empty-padding-top: var(--ti-common-space-6); + --ti-transfer-empty-padding-top: var(--ti-common-space-6, 6px); // 面板内容区域列表为空时显示的无数据文本的右侧内边距 - --ti-transfer-empty-padding-right: calc(var(--ti-common-space-4x) - 1px); + --ti-transfer-empty-padding-right: calc(var(--ti-common-space-4x, 16px) - 1px); // 面板内容区域列表为空时显示的无数据文本的底部内边距 - --ti-transfer-empty-padding-bottom: var(--ti-common-space-0); + --ti-transfer-empty-padding-bottom: var(--ti-common-space-0, 0px); // 面板内容区域列表为空时显示的无数据文本的左侧内边距 - --ti-transfer-empty-padding-left: var(--ti-common-space-0); + --ti-transfer-empty-padding-left: var(--ti-common-space-0, 0px); // 面板内容区域表格的左侧内边距 - --ti-transfer-table-padding-left: var(--ti-common-space-2x); + --ti-transfer-table-padding-left: var(--ti-common-space-2x, 8px); // 面板内容区域表格的顶部内边距 - --ti-transfer-table-padding-top: var(--ti-common-space-0); + --ti-transfer-table-padding-top: var(--ti-common-space-0, 0px); // 面板内容区域表格的右侧内边距 - --ti-transfer-table-padding-right: var(--ti-common-space-2x); + --ti-transfer-table-padding-right: var(--ti-common-space-2x, 8px); // 面板内容区域表格的底部内边距 - --ti-transfer-table-padding-bottom: var(--ti-common-space-0); + --ti-transfer-table-padding-bottom: var(--ti-common-space-0, 0px); // 面板内容区域分页的左侧内边距 - --ti-transfer-pager-padding-left: var(--ti-common-space-10); + --ti-transfer-pager-padding-left: var(--ti-common-space-10, 10px); // 面板内容区域分页的顶部内边距 - --ti-transfer-pager-padding-top: var(--ti-common-space-10); + --ti-transfer-pager-padding-top: var(--ti-common-space-10, 10px); // 面板内容区域分页的右侧内边距 - --ti-transfer-pager-padding-right: var(--ti-common-space-10); + --ti-transfer-pager-padding-right: var(--ti-common-space-10, 10px); // 面板内容区域分页的底部内边距 - --ti-transfer-pager-padding-bottom: var(--ti-common-space-10); + --ti-transfer-pager-padding-bottom: var(--ti-common-space-10, 10px); // 多选框左侧内边距 - --ti-transfer-checkbox-label-padding-left: var(--ti-common-space-2x); + --ti-transfer-checkbox-label-padding-left: var(--ti-common-space-2x, 8px); } diff --git a/packages/theme/src/tree-menu/vars.less b/packages/theme/src/tree-menu/vars.less index 3a8d1969c..ed0afebfe 100644 --- a/packages/theme/src/tree-menu/vars.less +++ b/packages/theme/src/tree-menu/vars.less @@ -12,31 +12,31 @@ .component-css-vars-tree-menu() { // 宽度 - --ti-tree-menu-width: calc(var(--ti-common-space-10) * 27); + --ti-tree-menu-width: calc(var(--ti-common-space-10, 10px) * 27); // 节点高度 - --ti-tree-menu-node-height: var(--ti-common-size-10x); + --ti-tree-menu-node-height: var(--ti-common-size-10x, 40px); // 空数据显示文本字号(hide) - --ti-tree-menu-font-size: var(--ti-common-font-size-base); + --ti-tree-menu-font-size: var(--ti-common-font-size-base, 12px); // 边框色 - --ti-tree-menu-border-color: var(--ti-common-color-line-dividing); + --ti-tree-menu-border-color: var(--ti-common-color-line-dividing, #dfe1e6); // 节点水平内边距 --ti-tree-menu-node-body-text-padding-horizontal: 0; // 选中节点的背景色 - --ti-tree-menu-node-selected-bg-color: var(--ti-common-color-bg-light-normal); + --ti-tree-menu-node-selected-bg-color: var(--ti-common-color-bg-light-normal, #e9edfa); // 选中节点文本色 - --ti-tree-menu-node-current-text-color: var(--ti-common-color-text-highlight); + --ti-tree-menu-node-current-text-color: var(--ti-common-color-text-highlight, #526ecc); // 选中节点左边框色 - --ti-tree-menu-square-left-border-color: var(--ti-common-color-line-active); + --ti-tree-menu-square-left-border-color: var(--ti-common-color-line-active, #5e7ce0); // 未选中节点文本色 - --ti-tree-menu-node-body-text-color: var(--ti-common-color-text-primary); + --ti-tree-menu-node-body-text-color: var(--ti-common-color-text-primary, #252b3a); // 节点悬浮背景色 - --ti-tree-menu-node-hover-bg-color: var(--ti-common-color-hover-background); + --ti-tree-menu-node-hover-bg-color: var(--ti-common-color-hover-background, #f2f5fc); // 折叠图标颜色 - --ti-tree-menu-collapse-icon-fill-color: var(--ti-common-color-icon-normal); + --ti-tree-menu-collapse-icon-fill-color: var(--ti-common-color-icon-normal, #575d6c); // 折叠图标右边距 - --ti-tree-menu-collapse-icon-margin-right: var(--ti-common-size-2x); + --ti-tree-menu-collapse-icon-margin-right: var(--ti-common-size-2x, 8px); // 节点序号字号 - --tree-menu-node-number-font-size: var(--ti-common-font-size-base); + --tree-menu-node-number-font-size: var(--ti-common-font-size-base, 12px); // 活跃节点竖线与文本的间距 - --tree-menu-node-vertical-line-margin-right: var(--ti-common-size-4x); + --tree-menu-node-vertical-line-margin-right: var(--ti-common-size-4x, 16px); } diff --git a/packages/theme/src/tree/vars.less b/packages/theme/src/tree/vars.less index a9fd56652..93a90533e 100644 --- a/packages/theme/src/tree/vars.less +++ b/packages/theme/src/tree/vars.less @@ -12,121 +12,121 @@ .component-css-vars-tree() { // 默认文本色 - --ti-tree-text-color: var(--ti-common-color-text-primary); + --ti-tree-text-color: var(--ti-common-color-text-primary, #252b3a); // 选中文本色 - --ti-tree-selected-text-color: var(--ti-common-color-text-primary); + --ti-tree-selected-text-color: var(--ti-common-color-text-primary, #252b3a); // 选中文本字重 - --ti-tree-selected-font-weight: var(--ti-common-font-weight-4); + --ti-tree-selected-font-weight: var(--ti-common-font-weight-4, normal); // 禁用文本色 - --ti-tree-disabled-text-color: var(--ti-common-color-text-disabled); + --ti-tree-disabled-text-color: var(--ti-common-color-text-disabled, #adb0b8); // 文本行高 - --ti-tree-text-line-height: var(--ti-common-line-height-number); + --ti-tree-text-line-height: var(--ti-common-line-height-number, 1.5); // 背景色 - --ti-tree-bg-color: var(--ti-common-color-bg-white-normal); + --ti-tree-bg-color: var(--ti-common-color-bg-white-normal, #fff); // 数据为空时文本色(hide) - --ti-tree-empty-text-color: var(--ti-common-color-text-secondary); + --ti-tree-empty-text-color: var(--ti-common-color-text-secondary, #575d6c); // 数据为空时整体最小高度 - --ti-tree-empty-min-height: var(--ti-common-size-15x); + --ti-tree-empty-min-height: var(--ti-common-size-15x, 60px); // 选中节点背景色 - --ti-tree-node-content-current-bg-color: var(--ti-common-color-bg-light-normal); + --ti-tree-node-content-current-bg-color: var(--ti-common-color-bg-light-normal, #e9edfa); // 节点悬浮背景色 - --ti-tree-node-content-hover-bg-color: var(--ti-common-color-hover-background); + --ti-tree-node-content-hover-bg-color: var(--ti-common-color-hover-background, #f2f5fc); // 节点悬浮外层背景色(hide) - --ti-tree-node-hover-outter-bg-color: var(--ti-common-color-transparent); + --ti-tree-node-hover-outter-bg-color: var(--ti-common-color-transparent, transparent); // 节点悬浮内层背景色(hide) --ti-tree-node-hover-inner-bg-color: var(--ti-tree-node-content-hover-bg-color); // 节点字号 - --ti-tree-node-label-font-size: var(--ti-common-font-size-1); + --ti-tree-node-label-font-size: var(--ti-common-font-size-1, 14px); // 节点内容左边距 - --ti-tree-node-label-margin-left: var(--ti-common-space-2x); + --ti-tree-node-label-margin-left: var(--ti-common-space-2x, 8px); // 节点内容右边距 - --ti-tree-node-content-padding-right: var(--ti-common-space-4x); + --ti-tree-node-content-padding-right: var(--ti-common-space-4x, 16px); // 节点文本背景色(hide) - --ti-tree-node-label-bg-color: var(--ti-common-color-bg-white-normal); + --ti-tree-node-label-bg-color: var(--ti-common-color-bg-white-normal, #fff); // 节点文本色(hide) - --ti-tree-node-label-text-color: var(--ti-common-color-text-secondary); + --ti-tree-node-label-text-color: var(--ti-common-color-text-secondary, #575d6c); // 展开按钮图标尺寸 - --ti-tree-node-icon-font-size: var(--ti-common-font-size-1); + --ti-tree-node-icon-font-size: var(--ti-common-font-size-1, 14px); // 加载图标色(hide) - --ti-tree-node-loading-icon-color: var(--ti-common-color-icon-active); + --ti-tree-node-loading-icon-color: var(--ti-common-color-icon-active, #5e7ce0); // 展开按钮图标色 - --ti-tree-node-expand-icon-color: var(--ti-common-color-icon-normal); + --ti-tree-node-expand-icon-color: var(--ti-common-color-icon-normal, #575d6c); // 收起按钮图标色 - --ti-tree-node-collapse-icon-color: var(--ti-common-color-icon-active); + --ti-tree-node-collapse-icon-color: var(--ti-common-color-icon-active, #5e7ce0); // 编辑、删除、添加图标尺寸 - --ti-tree-node-operate-icon-font-size: var(--ti-common-font-size-2); + --ti-tree-node-operate-icon-font-size: var(--ti-common-font-size-2, 16px); // 编辑、删除、添加图标间距 - --ti-tree-node-operate-icon-margin-left: var(--ti-common-space-base); + --ti-tree-node-operate-icon-margin-left: var(--ti-common-space-base, 4px); // 编辑、删除、添加图标色 - --ti-tree-node-operate-icon-color: var(--ti-common-color-icon-normal); + --ti-tree-node-operate-icon-color: var(--ti-common-color-icon-normal, #575d6c); // 悬浮图标色 - --ti-tree-node-checked-icon-color: var(--ti-common-color-icon-hover); + --ti-tree-node-checked-icon-color: var(--ti-common-color-icon-hover, #5e7ce0); // 节点左内边距 - --ti-tree-node-padding-left: var(--ti-common-space-2x); + --ti-tree-node-padding-left: var(--ti-common-space-2x, 8px); // 节点高亮背景色 - --ti-tree-node-highlight-bg-color: var(--ti-common-color-bg-light-normal); + --ti-tree-node-highlight-bg-color: var(--ti-common-color-bg-light-normal, #e9edfa); // 节点内容高度 - --ti-tree-node-content-height: calc(var(--ti-common-space-10) * 3); + --ti-tree-node-content-height: calc(var(--ti-common-space-10, 10px) * 3); // 节点内容边框弧度 --ti-tree-node-content-border-radius: 0; // 节点右键菜单内容字号 - --ti-tree-node-menu-font-size: var(--ti-common-font-size-base); + --ti-tree-node-menu-font-size: var(--ti-common-font-size-base, 12px); // 节点右键菜单字体色 - --ti-tree-node-menu-font-color: var(--ti-common-color-text-secondary); + --ti-tree-node-menu-font-color: var(--ti-common-color-text-secondary, #575d6c); // 节点右键菜单字体系列 --ti-tree-node-menu-font-family: Helvetica, Arial, 'Microsoft YaHei', sans-serif; // 节点右键菜单阴影 --ti-tree-node-menu-box-shadow: 2px 2px 4px -2px rgb(0, 0, 0, 0.2); // 节点缩进 - --ti-tree-node-indent: var(--ti-common-space-4x); + --ti-tree-node-indent: var(--ti-common-space-4x, 16px); // 节点连接线颜色 - --ti-tree-node-guide-line-border-color: var(--ti-common-color-line-dividing); + --ti-tree-node-guide-line-border-color: var(--ti-common-color-line-dividing, #dfe1e6); // 节点连接线宽度 - --ti-tree-node-guide-line-width: var(--ti-common-space-2x); + --ti-tree-node-guide-line-width: var(--ti-common-space-2x, 8px); // 显示连接线时图标字号(hide) - --ti-tree-node-showline-icon-size: var(--ti-common-font-size-2); + --ti-tree-node-showline-icon-size: var(--ti-common-font-size-2, 16px); // 底部分割线颜色 - --ti-tree-bottom-divider-bg-color: var(--ti-common-color-line-dividing); + --ti-tree-bottom-divider-bg-color: var(--ti-common-color-line-dividing, #dfe1e6); // 底部水平内边距 - --ti-tree-bottom-padding-horizontal: var(--ti-common-space-3x); + --ti-tree-bottom-padding-horizontal: var(--ti-common-space-3x, 12px); // 底部垂直内边距 - --ti-tree-bottom-padding-vertical: calc(var(--ti-common-space-2x) - 1px); + --ti-tree-bottom-padding-vertical: calc(var(--ti-common-space-2x, 8px) - 1px); // 底部文本内容左外边距 - --ti-tree-bottom-text-margin-left: var(--ti-common-space-10); + --ti-tree-bottom-text-margin-left: var(--ti-common-space-10, 10px); // small尺寸节点高度 - --ti-tree-small-node-content-height: calc(var(--ti-common-space-base) * 7); + --ti-tree-small-node-content-height: calc(var(--ti-common-space-base, 4px) * 7); // small尺寸节点高度 - --ti-tree-small-node-font-size: var(--ti-common-line-height-base); + --ti-tree-small-node-font-size: var(--ti-common-line-height-base, 12px); // 平铺模式节点高度 - --ti-tree-plain-node-height: calc(var(--ti-common-space-base) * 7); + --ti-tree-plain-node-height: calc(var(--ti-common-space-base, 4px) * 7); // 平铺模式节点字号 - --ti-tree-plain-font-size: var(--ti-common-line-height-base); + --ti-tree-plain-font-size: var(--ti-common-line-height-base, 12px); // 平铺模式节点左边距 - --ti-tree-plain-node-padding-left: var(--ti-common-space-3x); + --ti-tree-plain-node-padding-left: var(--ti-common-space-3x, 12px); // 平铺模式节点边框圆角 - --ti-tree-plain-node-border-radius: var(--ti-common-border-radius-1); + --ti-tree-plain-node-border-radius: var(--ti-common-border-radius-1, 4px); // 平铺模式节点标题图标尺寸 - --ti-tree-plain-node-auxi-icon-font-size: var(--ti-common-font-size-2); + --ti-tree-plain-node-auxi-icon-font-size: var(--ti-common-font-size-2, 16px); // 平铺模式辅助文本左边距 - --ti-tree-plain-node-auxi-margin-left: var(--ti-common-space-6x); + --ti-tree-plain-node-auxi-margin-left: var(--ti-common-space-6x, 24px); // 平铺模式辅助文本色 - --ti-tree-plain-node-auxi-text-color: var(--ti-common-color-text-secondary); + --ti-tree-plain-node-auxi-text-color: var(--ti-common-color-text-secondary, #575d6c); } // 删除节点提示框 .component-css-vars-tree-popover() { // 警告图标尺寸 - --ti-tree-popover-warn-icon-font-size: var(--ti-common-font-size-2); + --ti-tree-popover-warn-icon-font-size: var(--ti-common-font-size-2, 16px); // 警告图标色 - --ti-tree-popover-warn-icon-bg-color: var(--ti-common-color-warn); + --ti-tree-popover-warn-icon-bg-color: var(--ti-common-color-warn, #fa9841); // 警告图标右边距 - --ti-tree-popover-warn-icon-margin-right: var(--ti-common-space-base); + --ti-tree-popover-warn-icon-margin-right: var(--ti-common-space-base, 4px); // 复选框上边距 - --ti-tree-popover-checkbox-margin-top: var(--ti-common-space-3x); + --ti-tree-popover-checkbox-margin-top: var(--ti-common-space-3x, 12px); // 底部上边距 - --ti-tree-popover-footer-margin-top: var(--ti-common-space-3x); + --ti-tree-popover-footer-margin-top: var(--ti-common-space-3x, 12px); } diff --git a/packages/theme/src/upload-dragger/vars.less b/packages/theme/src/upload-dragger/vars.less index 0482ddfe9..888a4c329 100644 --- a/packages/theme/src/upload-dragger/vars.less +++ b/packages/theme/src/upload-dragger/vars.less @@ -12,27 +12,27 @@ .component-css-vars-upload-dragger() { // 拖拽上传框宽度 - --ti-upload-dragger-width: calc(var(--ti-common-size-base) * 90); + --ti-upload-dragger-width: calc(var(--ti-common-size-base, 4px) * 90); // 拖拽上传框高度 - --ti-upload-dragger-height: var(--ti-common-size-45x); + --ti-upload-dragger-height: var(--ti-common-size-45x, 180px); // 拖拽上传框背景色 - --ti-upload-dragger-bg-color: var(--ti-common-color-bg-gray); + --ti-upload-dragger-bg-color: var(--ti-common-color-bg-gray, #fafafa); // 拖拽上传框边框色 - --ti-upload-dragger-border-color: var(--ti-common-color-border); + --ti-upload-dragger-border-color: var(--ti-common-color-border, #adb0b8); // 拖拽上传框圆角 - --ti-upload-dragger-border-radius: var(--ti-common-border-radius-normal); + --ti-upload-dragger-border-radius: var(--ti-common-border-radius-normal, 2px); // 拖拽上传框(链接文本|悬浮边框)色 - --ti-upload-dragger-hover-text-color: var(--ti-common-color-primary-hover); + --ti-upload-dragger-hover-text-color: var(--ti-common-color-primary-hover, #7693f5); // 文件拖到框内上传框背景色 --ti-upload-dragger-dragover-bg-color: rgba(32, 159, 255, 0.06); // 拖拽上传框内图标色 - --ti-upload-dragger-icon-color: var(--ti-common-color-placeholder); + --ti-upload-dragger-icon-color: var(--ti-common-color-placeholder, #adb0b8); // 拖拽上传框内图标尺寸 - --ti-upload-dragger-icon-font-size: var(--ti-common-font-size-7); + --ti-upload-dragger-icon-font-size: var(--ti-common-font-size-7, 36px); // 拖拽上传框内文本色 - --ti-upload-dragger-text-color: var(--ti-common-color-text-secondary); + --ti-upload-dragger-text-color: var(--ti-common-color-text-secondary, #575d6c); // 拖拽上传框内字号 - --ti-upload-dragger-text-font-size: var(--ti-common-font-size-base); + --ti-upload-dragger-text-font-size: var(--ti-common-font-size-base, 12px); // 拖拽上传框文件列表边框色(hide) --ti-upload-dragger-files-border-color: #dcdfe6; } diff --git a/packages/theme/src/upload-list/vars.less b/packages/theme/src/upload-list/vars.less index 156753a1c..3d1b382a7 100644 --- a/packages/theme/src/upload-list/vars.less +++ b/packages/theme/src/upload-list/vars.less @@ -12,39 +12,39 @@ .component-css-vars-upload-list() { // 上传文件列表字号 - --ti-upload-list-item-font-size: var(--ti-common-font-size-1); + --ti-upload-list-item-font-size: var(--ti-common-font-size-1, 14px); // 上传文件列表文本色 - --ti-upload-list-item-text-color: var(--ti-common-color-info-normal); + --ti-upload-list-item-text-color: var(--ti-common-color-info-normal, #252b3a); // 上传文件列表项(图片框|悬浮背景)圆角 - --ti-upload-list-item-border-radius: var(--ti-common-border-radius-normal); + --ti-upload-list-item-border-radius: var(--ti-common-border-radius-normal, 2px); // 上传文件列表项悬浮背景色 --ti-upload-list-item-hover-background-color: #f5f7fa; // 上传成功列表项悬浮文本色 - --ti-upload-list-item-hover-text-color: var(--ti-common-color-primary-hover); + --ti-upload-list-item-hover-text-color: var(--ti-common-color-primary-hover, #7693f5); // 上传文件列表项悬浮下划线(hide) --ti-upload-list-item-hover-text-decoration: none; // 上传文件列表项前置图标色 - --ti-upload-list-item-name-icon-color: var(--ti-common-color-info); + --ti-upload-list-item-name-icon-color: var(--ti-common-color-info, #252b3a); // 上传文件列表项前置图标尺寸 - --ti-upload-list-item-name-icon-font-size: var(--ti-common-font-size-2); + --ti-upload-list-item-name-icon-font-size: var(--ti-common-font-size-2, 16px); // 上传文件列表项删除图标色 --ti-upload-list-svg-close-icon-color: #606266; // 上传文件列表项图标尺寸 - --ti-upload-list-svg-icon-font-size: var(--ti-common-font-size-base); + --ti-upload-list-svg-icon-font-size: var(--ti-common-font-size-base, 12px); // 上传文件列表项成功图标尺寸 - --ti-upload-list-successful-icon-font-size: var(--ti-common-font-size-1); + --ti-upload-list-successful-icon-font-size: var(--ti-common-font-size-1, 14px); // 照片墙上传列表项边框色 - --ti-upload-list-picture-card-item-border-color: var(--ti-common-color-border); + --ti-upload-list-picture-card-item-border-color: var(--ti-common-color-border, #adb0b8); // 照片墙上传列表项背景色 - --ti-upload-list-picture-card-item-bg-color: var(--ti-common-color-light); + --ti-upload-list-picture-card-item-bg-color: var(--ti-common-color-light, #fff); // 照片墙上传列表项右上角图标填充色 - --ti-upload-list-picture-card-item-text-color: var(--ti-common-color-light); + --ti-upload-list-picture-card-item-text-color: var(--ti-common-color-light, #fff); // 上传列表项成功状态图标色或背景色 - --ti-upload-list-successful-status-bg-color: var(--ti-common-color-success-normal); + --ti-upload-list-successful-status-bg-color: var(--ti-common-color-success-normal, #50d4ab); // 照片墙上传列表项宽度(new) - --ti-upload-list-picture-card-width: var(--ti-common-size-37x); + --ti-upload-list-picture-card-width: var(--ti-common-size-37x, 148px); // 照片墙上传列表项高度(new) - --ti-upload-list-picture-card-height: var(--ti-common-size-37x); + --ti-upload-list-picture-card-height: var(--ti-common-size-37x, 148px); // 照片墙上传列表项进度条尺寸(new) --ti-upload-list-picture-card-progress-size: 126px; // 照片墙上传列表项按钮颜色(new) diff --git a/packages/theme/src/upload/vars.less b/packages/theme/src/upload/vars.less index 145dced0a..87609d745 100644 --- a/packages/theme/src/upload/vars.less +++ b/packages/theme/src/upload/vars.less @@ -12,9 +12,9 @@ .component-css-vars-upload() { // 自定义上传提示字号 - --ti-upload-tip-font-size: var(--ti-common-font-size-base); + --ti-upload-tip-font-size: var(--ti-common-font-size-base, 12px); // 自定义上传提示文本色 - --ti-upload-tip-text-color: var(--ti-common-color-text-primary); + --ti-upload-tip-text-color: var(--ti-common-color-text-primary, #252b3a); // 照片墙上传按钮背景色 --ti-upload-picture-card-bg-color: #fbfdff; // 照片墙上传按钮边框色 @@ -22,13 +22,13 @@ // 照片墙上传按钮圆角 --ti-upload-picture-card-border-radius: 6px; // 照片墙上传按钮悬浮边框色 - --ti-upload-picture-card-hover-border-color: var(--ti-common-color-dash-line-hover); + --ti-upload-picture-card-hover-border-color: var(--ti-common-color-dash-line-hover, #526ecc); // 照片墙上传按钮图标尺寸 - --ti-upload-picture-card-icon-font-size: var(--ti-common-size-7x); + --ti-upload-picture-card-icon-font-size: var(--ti-common-size-7x, 28px); // 照片墙上传按钮图标色 --ti-upload-picture-card-icon-color: #8c939d; // 拖拽上传区域宽度 - --ti-upload-picture-card-width: var(--ti-common-size-37x); + --ti-upload-picture-card-width: var(--ti-common-size-37x, 148px); // 拖拽上传区域高度 - --ti-upload-picture-card-height: var(--ti-common-size-37x); + --ti-upload-picture-card-height: var(--ti-common-size-37x, 148px); } diff --git a/packages/theme/src/user-account/vars.less b/packages/theme/src/user-account/vars.less index c53435233..7105b80a9 100644 --- a/packages/theme/src/user-account/vars.less +++ b/packages/theme/src/user-account/vars.less @@ -12,6 +12,6 @@ .component-css-vars-user-account() { --ti-user-account-padding-vertical: 0; - --ti-user-account-padding-horizontal: var(--ti-common-space-2x); + --ti-user-account-padding-horizontal: var(--ti-common-space-2x, 8px); --ti-user-account-line-height: 36px; } diff --git a/packages/theme/src/user-card/vars.less b/packages/theme/src/user-card/vars.less index 16ac3c603..ae4e528ee 100644 --- a/packages/theme/src/user-card/vars.less +++ b/packages/theme/src/user-card/vars.less @@ -11,8 +11,8 @@ */ .component-css-vars-user-card() { - --ti-usercard-border-color: var(--ti-common-color-border); - --ti-usercard-image-border-radius: var(--ti-common-border-radius-normal); + --ti-usercard-border-color: var(--ti-common-color-border, #adb0b8); + --ti-usercard-image-border-radius: var(--ti-common-border-radius-normal, 2px); --ti-usercard-state-online-text-color: #33cc00; --ti-usercard-state-busy-text-color: #ff3300; --ti-usercard-state-goaway-text-color: #ffae00; diff --git a/packages/theme/src/user-contact/vars.less b/packages/theme/src/user-contact/vars.less index d7fb38c2e..9715c8434 100644 --- a/packages/theme/src/user-contact/vars.less +++ b/packages/theme/src/user-contact/vars.less @@ -11,13 +11,13 @@ */ .component-css-vars-user-contact() { - --ti-user-contact-roleInfo-text-color: var(--ti-common-color-info-normal); - --ti-user-contact-roleInfo-font-size: var(--ti-common-font-size-base); - --ti-user-contact-card-message-text-color: var(--ti-common-color-placeholder); + --ti-user-contact-roleInfo-text-color: var(--ti-common-color-info-normal, #252b3a); + --ti-user-contact-roleInfo-font-size: var(--ti-common-font-size-base, 12px); + --ti-user-contact-card-message-text-color: var(--ti-common-color-placeholder, #adb0b8); --ti-user-contact-card-border-color: #ddd; --ti-user-contact-card-header-bg-color: #3f4251; - --ti-user-contact-card-header-role-text-color: var(--ti-common-color-light); - --ti-user-contact-card-header-role-font-size: var(--ti-common-font-size-2); + --ti-user-contact-card-header-role-text-color: var(--ti-common-color-light, #fff); + --ti-user-contact-card-header-role-font-size: var(--ti-common-font-size-2, 16px); --ti-user-contact-card-header-roleNum-text-color: #b9babc; - --ti-user-contact-card-espace-text-color: var(--ti-common-color-placeholder); + --ti-user-contact-card-espace-text-color: var(--ti-common-color-placeholder, #adb0b8); } diff --git a/packages/theme/src/user-head/vars.less b/packages/theme/src/user-head/vars.less index edfdf1725..f13bdc072 100644 --- a/packages/theme/src/user-head/vars.less +++ b/packages/theme/src/user-head/vars.less @@ -11,10 +11,10 @@ */ .component-css-vars-user-head() { - --ti-userhead-head-normal-size: var(--ti-common-size-18x); + --ti-userhead-head-normal-size: var(--ti-common-size-18x, 72px); --ti-userhead-head-small-size: 30px; - --ti-userhead-head-icon-size-normal: var(--ti-common-size-10x); + --ti-userhead-head-icon-size-normal: var(--ti-common-size-10x, 40px); --ti-userhead-head-icon-small-size: 14px; - --ti-userhead-head-border-radius: var(--ti-common-border-radius-1); + --ti-userhead-head-border-radius: var(--ti-common-border-radius-1, 4px); --ti-userhead-head-bg-color: #bbbbbb; } diff --git a/packages/theme/src/user-link/vars.less b/packages/theme/src/user-link/vars.less index bf101dec2..4c96f6776 100644 --- a/packages/theme/src/user-link/vars.less +++ b/packages/theme/src/user-link/vars.less @@ -11,8 +11,8 @@ */ .component-css-vars-user-link() { - --ti-user-link-font-size: var(--ti-common-font-size-base); - --ti-user-link-text-color: var(--ti-common-color-info-normal); - --ti-user-link-font-weight: var(--ti-common-font-weight-7); - --ti-user-link-border-radius: var(--ti-common-border-radius-normal); + --ti-user-link-font-size: var(--ti-common-font-size-base, 12px); + --ti-user-link-text-color: var(--ti-common-color-info-normal, #252b3a); + --ti-user-link-font-weight: var(--ti-common-font-weight-7, bold); + --ti-user-link-border-radius: var(--ti-common-border-radius-normal, 2px); } diff --git a/packages/theme/src/user/vars.less b/packages/theme/src/user/vars.less index 758ac52bc..21c896d70 100644 --- a/packages/theme/src/user/vars.less +++ b/packages/theme/src/user/vars.less @@ -11,7 +11,7 @@ */ .component-css-vars-user() { - --ti-user-font-size: var(--ti-common-font-size-base); - --ti-user-tag-bg-color: var(--ti-common-color-hover-background); - --ti-user-svg-text-color: var(--ti-base-color-brand-6); + --ti-user-font-size: var(--ti-common-font-size-base, 12px); + --ti-user-tag-bg-color: var(--ti-common-color-hover-background, #f2f5fc); + --ti-user-svg-text-color: var(--ti-base-color-brand-6, #5e7ce0); } diff --git a/packages/theme/src/wizard/vars.less b/packages/theme/src/wizard/vars.less index 6315ed708..c86b90191 100644 --- a/packages/theme/src/wizard/vars.less +++ b/packages/theme/src/wizard/vars.less @@ -12,17 +12,17 @@ .component-css-vars-wizard() { // 横向流程图默认字号(不含基础插槽) - --ti-wizard-font-size: var(--ti-common-font-size-base); + --ti-wizard-font-size: var(--ti-common-font-size-base, 12px); // 节点文本色|图标色 - --ti-wizard-icon-color: var(--ti-common-color-light); + --ti-wizard-icon-color: var(--ti-common-color-light, #fff); // 时间线流程图节点两侧文本色 - --ti-wizard-text-color: var(--ti-common-color-info-normal); + --ti-wizard-text-color: var(--ti-common-color-info-normal, #252b3a); // 时间线流程图节点右侧文字悬浮圆角 - --ti-wizard-detail-border-radius: var(--ti-common-border-radius-normal); + --ti-wizard-detail-border-radius: var(--ti-common-border-radius-normal, 2px); // 时间线流程图节点右侧文字悬浮背景色 - --ti-wizard-detail-bg-color: var(--ti-common-color-warning-normal); + --ti-wizard-detail-bg-color: var(--ti-common-color-warning-normal, #fa9841); // 已完成的节点和线条背景色 - --ti-wizard-icon-bg-color: var(--ti-common-color-bg-emphasize); + --ti-wizard-icon-bg-color: var(--ti-common-color-bg-emphasize, #5e7ce0); // 未完成的节点背景色 - --ti-wizard-chart-icon-bg-color: var(--ti-common-color-line-disabled); + --ti-wizard-chart-icon-bg-color: var(--ti-common-color-line-disabled, #dfe1e6); } diff --git a/packages/theme/src/year-table/vars.less b/packages/theme/src/year-table/vars.less index d519619d5..6423fb8ab 100644 --- a/packages/theme/src/year-table/vars.less +++ b/packages/theme/src/year-table/vars.less @@ -11,6 +11,6 @@ */ .component-css-vars-year-table() { - --ti-year-table-td-text-color: var(--ti-base-color-brand-7); + --ti-year-table-td-text-color: var(--ti-base-color-brand-7, #526ecc); --ti-year-table-td-icon-color: #303133; }