diff --git a/packages/theme/src/select/smb-theme.js b/packages/theme/src/select/smb-theme.js index bbee3bedb..a7c4e4a57 100644 --- a/packages/theme/src/select/smb-theme.js +++ b/packages/theme/src/select/smb-theme.js @@ -2,9 +2,9 @@ export const tinySelectSmbTheme = { 'ti-select-input-caret-font-size': 'var(--ti-common-font-size-2)', 'ti-select-input-caret-hover-icon-color': 'var(--ti-common-color-icon-graybg-hover)', 'ti-select-input-caret-icon-color': 'var(--ti-common-color-icon-normal)', - 'ti-select-tags-wrap-padding-left': 'calc(var(--ti-common-space-6)/2)', - 'ti-select-tags-wrap-padding-top': 'calc(var(--ti-common-space-6)/2)', - 'ti-select-tags-wrap-padding-bottom': 'calc(var(--ti-common-space-6)/2)', + 'ti-select-tags-wrap-padding-left': 'calc(var(--ti-common-space-6) / 2)', + 'ti-select-tags-wrap-padding-top': 'calc(var(--ti-common-space-6) / 2)', + 'ti-select-tags-wrap-padding-bottom': 'calc(var(--ti-common-space-6) / 2)', 'ti-select-input-icon-top-small': 'var(--ti-common-space-3x)', 'ti-select-input-icon-top': 'var(--ti-common-space-4x)' } diff --git a/packages/theme/src/theme/aurora-theme/index.js b/packages/theme/src/theme/aurora-theme/index.js index aee5d0cb8..957ca1c52 100644 --- a/packages/theme/src/theme/aurora-theme/index.js +++ b/packages/theme/src/theme/aurora-theme/index.js @@ -424,7 +424,138 @@ export const tinyBaseAuroraTheme = { 'ti-common-size-height-medium': 'var(--ti-common-size-10x)', // NewCssVar 'ti-common-size-height-small': 'var(--ti-common-size-8x)', // NewCssVar 'ti-common-size-height-normal': '30px', // NewCssVar 基本高度值(Button、Input) - 'ti-common-size-height-mini': 'var(--ti-common-size-6x)' // NewCssVar + 'ti-common-size-height-mini': 'var(--ti-common-size-6x)', // NewCssVar + + // 以下皆为新增变量 + // 新增saurora缺少的basic-var.less变量 + 'ti-common-color-primary-hover': 'var(--ti-base-color-brand-5)', + 'ti-common-color-primary-normal': 'var(--ti-base-color-brand-6)', + + // aurora适配过程中产生的新变量如下 + // 文本色 + 'ti-base-text-color-1': '#333d48', + 'ti-base-text-color-2': '#161e26', + 'ti-base-text-color-3': '#c4c4c4', + 'ti-base-text-color-4': '#3eaf7c', + 'ti-base-text-color-5': '#1F2D3D', + 'ti-base-text-color-6': '#c0c4cc', + + // 图标色 + 'ti-base-icon-color-1': '#939599', + 'ti-base-icon-color-2': '#78828d', + + // 文本或图标色带透明度 + 'ti-base-text-color-transparent-10': 'rgba(22, 30, 38, 0.1)', + 'ti-base-text-color-transparent-30': 'rgba(22, 30, 38, 0.3)', + 'ti-base-icon-color-transparent-75': 'rgba(0, 0, 0, 0.75)', + + // 边框色 + 'ti-base-border-color-1': '#e4e7ed', + 'ti-base-border-color-2': '#69c0ff', + 'ti-base-border-color-3': '#b3d8ff', + 'ti-base-border-color-4': '#c2e7b0', + 'ti-base-border-color-5': '#fbc4c4', + 'ti-base-border-color-6': '#f5dab1', + + // 边框色带透明度 + 'ti-base-border-color-transparent-15': 'rgba(24,144,255,.15)', + 'ti-base-border-color-transparent-30': 'rgba(57, 57, 57, 0.3)', + 'ti-base-border-color-warn-transparent-6': 'rgba(250,173,20,.06)', + 'ti-base-border-color-warn-transparent-15': 'rgba(250,173,20,.15)', + 'ti-base-border-color-success-transparent-15': 'rgba(82,196,26,.15)', + 'ti-base-border-color-danger-transparent-15': 'rgba(245,34,45,.15)', + + // 背景色 + 'ti-base-bg-color-1': '#303133', + 'ti-base-bg-color-2': '#0067d1', // 常用于聚焦背景色 + 'ti-base-bg-color-3': '#005bba', + 'ti-base-bg-color-4': '#67c23a', + 'ti-base-bg-color-5': '#e6a23c', + 'ti-base-bg-color-6': '#f1f1f1', + 'ti-base-bg-color-7': '#d8d8d8', + 'ti-base-bg-color-8': '#0072e8', // 用于鼠标悬浮 + 'ti-base-bg-color-9': '#fa8c16', // 警告背景色 + 'ti-base-bg-color-10': '#dbdbdb', + + // 背景色带透明度 + 'ti-base-bg-color-transparent-5': 'rgba(22, 30, 38, 0.05)', + 'ti-base-bg-color-transparent-6': 'rgba(24,144,255,.06)', + 'ti-base-bg-color-transparent-20': 'rgba(22, 30, 38, 0.2)', + 'ti-base-bg-color-transparent-30': 'rgba(0, 103, 209, 0.3)', + 'ti-base-bg-color-warn-transparent-6': 'rgba(24,144,255,.06)', + 'ti-base-bg-color-danger-transparent-6': 'rgba(245,34,45,.06)', + 'ti-base-bg-color-success-transparent-6': 'rgba(82,196,26,.06)', + + // 阴影 + 'ti-base-box-shadow': '0 0 4px 0 #d9d9d9', + + // 新属性 + 'ti-base-text-decoration-underline': 'underline', + 'ti-base-rotate-0': 'rotate(0)', + 'ti-base-rotate-90': 'rotate(90deg)', + 'ti-base-percent-30': '30%', + 'ti-base-percent-60': '60%', + 'ti-base-text-align': 'center', + 'ti-base-opacity-8': '0.8', + + 'ti-common-text-color-normal': 'var(--ti-base-text-color-1)', // 默认文本色2 + 'ti-common-text-color-secondary': 'var(--ti-base-text-color-2)', // 次要文本色 + 'ti-common-text-color-3': 'var(--ti-base-text-color-3)', // 次要文本色 + 'ti-common-text-color-4': 'var(--ti-base-text-color-4)', + 'ti-common-text-color-5': 'var(--ti-base-text-color-5)', + 'ti-common-text-color-6': 'var(--ti-base-text-color-6)', + 'ti-common-text-color-transparent-10': 'var(--ti-base-text-color-transparent-10)', + 'ti-common-text-color-transparent-30': 'var(--ti-base-text-color-transparent-30)', + + 'ti-common-icon-color-1': 'var(--ti-base-icon-color-1)', + 'ti-common-icon-color-2': 'var(--ti-base-icon-color-2)', + 'ti-common-icon-color-transparent-75': 'var(--ti-base-icon-color-transparent-75)', // 图标色 + + 'ti-common-border-color-normal': 'var(--ti-base-border-color-1)', + 'ti-common-border-color-info': 'var(--ti-base-border-color-2)', // 提示边框色 + 'ti-common-border-color-plain': 'var(--ti-base-border-color-3)', + 'ti-common-border-color-success': 'var(--ti-base-border-color-4)', + 'ti-common-border-color-danger': 'var(--ti-base-border-color-5)', + 'ti-common-border-color-warn': 'var(--ti-base-border-color-6)', + 'ti-common-border-color-transparent-15': 'var(--ti-base-border-color-transparent-15)', + 'ti-common-border-color-transparent-30': 'var(--ti-base-border-color-transparent-30)', + 'ti-common-border-color-warn-transparent-6': 'var(--ti-base-border-color-warn-transparent-6)', + 'ti-common-border-color-warn-transparent-15': 'var(--ti-base-border-color-warn-transparent-15)', + 'ti-common-border-color-success-transparent-15': 'var(--ti-base-border-color-success-transparent-15)', + 'ti-common-border-color-danger-transparent-15': 'var(--ti-base-border-color-danger-transparent-15)', + + 'ti-common-bg-color-transparent-5': 'var(--ti-base-bg-color-transparent-5)', // 次要禁用背景色 + 'ti-common-bg-color-transparent-6': 'var(--ti-base-bg-color-transparent-6)', // 次要禁用背景色 + 'ti-common-bg-color-transparent-20': 'var(--ti-base-bg-color-transparent-20)', + 'ti-common-bg-color-transparent-30': 'var(--ti-base-bg-color-transparent-30)', // 禁用背景色 + 'ti-common-bg-color-warn-transparent-6': 'var(--ti-base-bg-color-warn-transparent-6)', + 'ti-common-bg-color-danger-transparent-6': 'var(--ti-base-bg-color-danger-transparent-6)', + 'ti-common-bg-color-success-transparent-6': 'var(--ti-base-bg-color-success-transparent-6)', + 'ti-common-bg-color-normal': 'var(--ti-base-bg-color-1)', // 弹框背景色 + 'ti-common-bg-color-focus': 'var(--ti-base-bg-color-2)', // 聚焦背景色 + 'ti-common-bg-color-active': 'var(--ti-base-bg-color-3)', // hover或点击背景色 + 'ti-common-bg-color-success': 'var(--ti-base-bg-color-4)', // 成功背景色 + 'ti-common-bg-color-warn': 'var(--ti-base-bg-color-5)', // 警告背景色 + 'ti-common-bg-color-header-1': 'var(--ti-base-bg-color-6)', + 'ti-common-bg-color-header-2': 'var(--ti-base-bg-color-7)', + 'ti-common-bg-color-hover': 'var(--ti-base-bg-color-8)', + 'ti-common-bg-color-warn-1': 'var(--ti-base-bg-color-9)', + 'ti-common-bg-color-10': 'var(--ti-base-bg-color-10)', + + 'ti-common-box-shadow': 'var(--ti-base-box-shadow)', + + // 新属性变量 + 'ti-common-text-decoration-underline': 'var(--ti-base-text-decoration-underline)', + + 'ti-common-rotate-0': 'var(--ti-base-rotate-0)', + 'ti-common-rotate-90': 'var(--ti-base-rotate-90)', + + 'ti-common-percent-30': 'var(--ti-base-percent-30)', + 'ti-common-percent-60': 'var(--ti-base-percent-60)', + 'ti-common-opacity-8': 'var(--ti-base-opacity-8)', // 透明度 + + // 文本居中 + 'ti-common-text-align': 'var(--ti-base-text-align)' } -export * from './component' +export * from './component.js' diff --git a/packages/theme/src/theme/smb-theme/index.js b/packages/theme/src/theme/smb-theme/index.js index df73b1486..740d4e8b5 100644 --- a/packages/theme/src/theme/smb-theme/index.js +++ b/packages/theme/src/theme/smb-theme/index.js @@ -336,7 +336,113 @@ export const tinyBaseSmbTheme = { 'ti-common-scrollbar-thumb-bg-color': 'var(--ti-base-color-common-4)', 'ti-common-scrollbar-thumb-border-radius': '4px', 'ti-common-scrollbar-thumb-hover-bg-color': 'var(--ti-base-color-common-4)', - 'ti-common-scrollbar-thumb-active-bg-color': 'var(--ti-base-color-common-4)' + 'ti-common-scrollbar-thumb-active-bg-color': 'var(--ti-base-color-common-4)', + + // 以下皆为新增变量 + // 新增smb缺少的basic-var.less变量 + // 新增尺寸 + 'ti-common-size-base': '4px', + 'ti-common-size-2x': 'calc(var(--ti-common-size-base) * 2)', + 'ti-common-size-3x': 'calc(var(--ti-common-size-base) * 3)', + 'ti-common-size-4x': 'calc(var(--ti-common-size-base) * 4)', + 'ti-common-size-5x': 'calc(var(--ti-common-size-base) * 5)', + 'ti-common-size-6x': 'calc(var(--ti-common-size-base) * 6)', + 'ti-common-size-7x': 'calc(var(--ti-common-size-base) * 7)', + 'ti-common-size-8x': 'calc(var(--ti-common-size-base) * 8)', + 'ti-common-size-9x': 'calc(var(--ti-common-size-base) * 9)', + 'ti-common-size-10x': 'calc(var(--ti-common-size-base) * 10)', + 'ti-common-size-11x': 'calc(var(--ti-common-size-base) * 11)', + 'ti-common-size-12x': 'calc(var(--ti-common-size-base) * 12)', + 'ti-common-size-13x': 'calc(var(--ti-common-size-base) * 13)', + 'ti-common-size-14x': 'calc(var(--ti-common-size-base) * 14)', + 'ti-common-size-15x': 'calc(var(--ti-common-size-base) * 15)', + 'ti-common-size-16x': 'calc(var(--ti-common-size-base) * 16)', + 'ti-common-size-17x': 'calc(var(--ti-common-size-base) * 17)', + 'ti-common-size-18x': 'calc(var(--ti-common-size-base) * 18)', + 'ti-common-size-19x': 'calc(var(--ti-common-size-base) * 19)', + 'ti-common-size-20x': 'calc(var(--ti-common-size-base) * 20)', + 'ti-common-size-21x': 'calc(var(--ti-common-size-base) * 21)', + 'ti-common-size-22x': 'calc(var(--ti-common-size-base) * 22)', + 'ti-common-size-23x': 'calc(var(--ti-common-size-base) * 23)', + 'ti-common-size-24x': 'calc(var(--ti-common-size-base) * 24)', + 'ti-common-size-25x': 'calc(var(--ti-common-size-base) * 25)', + 'ti-common-size-26x': 'calc(var(--ti-common-size-base) * 26)', + 'ti-common-size-27x': 'calc(var(--ti-common-size-base) * 27)', + 'ti-common-size-28x': 'calc(var(--ti-common-size-base) * 28)', + 'ti-common-size-29x': 'calc(var(--ti-common-size-base) * 29)', + 'ti-common-size-30x': 'calc(var(--ti-common-size-base) * 30)', + 'ti-common-size-31x': 'calc(var(--ti-common-size-base) * 31)', + 'ti-common-size-32x': 'calc(var(--ti-common-size-base) * 32)', + 'ti-common-size-33x': 'calc(var(--ti-common-size-base) * 33)', + 'ti-common-size-34x': 'calc(var(--ti-common-size-base) * 34)', + 'ti-common-size-35x': 'calc(var(--ti-common-size-base) * 35)', + 'ti-common-size-36x': 'calc(var(--ti-common-size-base) * 36)', + 'ti-common-size-37x': 'calc(var(--ti-common-size-base) * 37)', + 'ti-common-size-38x': 'calc(var(--ti-common-size-base) * 38)', + 'ti-common-size-39x': 'calc(var(--ti-common-size-base) * 39)', + 'ti-common-size-40x': 'calc(var(--ti-common-size-base) * 40)', + 'ti-common-size-41x': 'calc(var(--ti-common-size-base) * 41)', + 'ti-common-size-42x': 'calc(var(--ti-common-size-base) * 42)', + 'ti-common-size-43x': 'calc(var(--ti-common-size-base) * 43)', + 'ti-common-size-44x': 'calc(var(--ti-common-size-base) * 44)', + 'ti-common-size-45x': 'calc(var(--ti-common-size-base) * 45)', + 'ti-common-size-46x': 'calc(var(--ti-common-size-base) * 46)', + 'ti-common-size-47x': 'calc(var(--ti-common-size-base) * 47)', + 'ti-common-size-48x': 'calc(var(--ti-common-size-base) * 48)', + 'ti-common-size-49x': 'calc(var(--ti-common-size-base) * 49)', + 'ti-common-size-50x': 'calc(var(--ti-common-size-base) * 50)', + + // 透明度颜色:主要用于边框色,背景色 + 'ti-base-bg-color-transparent-5': '#0000000D', // 5% 等于 rgba(0, 0, 0, 0.05) + 'ti-base-bg-color-transparent-8': 'rgba(0,0,0,0.08)', + 'ti-base-bg-color-transparent-15': 'rgba(0,0,0,0.15)', + 'ti-base-bg-color-transparent-40': 'rgba(0, 0, 0, 0.4)', + 'ti-base-bg-color-transparent-50': '#C2C2C280', + 'ti-base-bg-color-loading-transparent-50': 'rgba(255, 255, 255, 0.5)', + 'ti-base-bg-color-disabled-transparent-5': 'rgba(0,0,0,0.05)', + + // 文本色 + 'ti-base-text-color-1': '#F76360', + 'ti-base-text-color-2': '#F2F2F2', + + 'ti-base-font-family': '"Manrop","Manrope-Medium"', + + // 新增阴影 + 'ti-base-box-shadow-1': '0px 2px 12px 0px rgba(0,0,0,0.08)', + + // 新属性变量 + 'ti-base-text-decoration-underline': 'underline', + 'ti-base-display-block': 'block', + 'ti-base-opacity-10': '1', + + 'ti-common-color-transparent': 'var(--ti-base-color-transparent)', + 'ti-common-font-weight-4': 'normal', + 'ti-common-border-weight-normal': '1px', + 'ti-common-size-0': '0px', + 'ti-common-size-auto': 'auto', + 'ti-common-font-weight-6': '600', + 'ti-common-border-radius-0': '0px', + 'ti-common-border-weight-1': '2px', + 'ti-common-line-height-number': '1.5', + + // 新属性变量 + 'ti-common-text-decoration-underline': 'var(--ti-base-text-decoration-underline)', + 'ti-common-display-block': 'var(--ti-base-display-block)', + 'ti-common-opacity-1': 'var(--ti-base-opacity-10)', + + 'ti-common-bg-color-active': 'var(--ti-base-bg-color-transparent-5)', // 活跃背景色 + 'ti-common-bg-color-hover-40': 'var(--ti-base-bg-color-transparent-40)', + 'ti-common-bg-color-transparent-15': 'var(--ti-base-bg-color-transparent-15)', // 活跃背景色 + 'ti-common-bg-color-transparent-50': 'var(--ti-base-bg-color-transparent-50)', // 禁用背景色 + 'ti-common-bg-color-loading-transparent-50': 'var(--ti-base-bg-color-loading-transparent-50)', // 加载中背景色 + 'ti-common-bg-color-disabled-transparent-5': 'var(--ti-base-bg-color-disabled-transparent-5)', // 禁用背景色 + 'ti-common-text-color-active': 'var(--ti-base-text-color-1)', // 文本色 + 'ti-common-box-shadow-popover': 'var(--ti-base-box-shadow-1)', // 弹出框阴影 + 'ti-common-text-color-disabled': 'var(--ti-base-text-color-2)', // 禁用色 + + 'ti-common-border-color-transparent-8': 'var(--ti-base-bg-color-transparent-8)', // 折叠框边框色 + + 'ti-common-input-font-family': 'var(--ti-base-font-family)' // 输入框字体 } -export * from './component' +export * from './component.js'