forked from opentiny/tiny-vue
feat(theme): Add two basic variables for the theme (#1213)
This commit is contained in:
chenxi-20
GitHub
parent
8017538a1b
commit
58a6ebbc49
|
|
@ -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)'
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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'
|
||||
|
|
|
|||
|
|
@ -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'
|
||||
|
|
|
|||
Loading…
Reference in New Issue