Refactor theme tools for dynamic switch theme (#2352)
* refactor(theme): refactor * refactor(theme-build): remove old theme folds and scripts * fix(theme): fix * fix(theme): fix * fix(theme): remove theme/src/theme fold
This commit is contained in:
申君健
GitHub
parent
c682b1c881
commit
5e8794bb68
|
|
@ -1,353 +0,0 @@
|
|||
import gulp from 'gulp'
|
||||
import minimist from 'minimist'
|
||||
import shell from 'shelljs'
|
||||
import path from 'path'
|
||||
import { generateKey } from 'crypto'
|
||||
|
||||
const build = gulp.series(init, read, write, clean)
|
||||
build.description = '将本地文档的组件api, 转换为低代码需要的bundle.json 格式'
|
||||
build.flags = {
|
||||
'--apiPath': '设置api文档路径，默认为： examples/sites/demos/pc',
|
||||
'--tinyVer': '设置生成中，tinyVer的版本号，默认为 3.11.0'
|
||||
}
|
||||
export default build
|
||||
|
||||
const rootPath = process.cwd()
|
||||
let apiPath = 'examples/sites/demos/pc'
|
||||
let tinyVer = '3.11.0'
|
||||
let guid = 1
|
||||
let menus = []
|
||||
|
||||
const ignoreKeys = ['color', 'font', 'icon']
|
||||
const mixinKeys = {
|
||||
'form': [{ key: 'form-item', nameCn: '表单项', desc: '表单中的一行表单域对象' }],
|
||||
'layout': [
|
||||
{ key: 'row', nameCn: '行元素', desc: '行元素' },
|
||||
{ key: 'col', nameCn: '列元素', desc: '列元素' }
|
||||
],
|
||||
'breadcrumb': [{ key: 'breadcrumb-item', nameCn: '面包屑项', desc: '面包屑的层级对象' }],
|
||||
'timeline': [{ key: 'timeline-item', nameCn: '时间线数据项', desc: '时间线数据项' }],
|
||||
'dropdown': [
|
||||
{ key: 'dropdown-menu', nameCn: '下拉菜单', desc: '下拉菜单' },
|
||||
{ key: 'dropdown-item', nameCn: '下拉菜单项', desc: '下拉菜单项' }
|
||||
],
|
||||
'carousel': [{ key: 'carousel-item', nameCn: '走马灯数据项', desc: '走马灯数据项' }],
|
||||
'checkbox': [
|
||||
{ key: 'checkbox-group', nameCn: '复选框组', desc: '复选框组' },
|
||||
{ key: 'checkbox-button', nameCn: '复选框按钮', desc: '复选框按钮' }
|
||||
],
|
||||
'radio': [
|
||||
{ key: 'radio-group', nameCn: '单选框组', desc: '单选框组' },
|
||||
{ key: 'radio-button', nameCn: '单选框按钮', desc: '单选框按钮' }
|
||||
],
|
||||
'grid': [
|
||||
{ key: 'grid-column', nameCn: '表格列对象', desc: '表格列对象' },
|
||||
{ key: 'grid-toolbar', nameCn: '表格工具栏', desc: '表格工具栏' }
|
||||
]
|
||||
}
|
||||
|
||||
const result = {
|
||||
'data': {
|
||||
'framework': 'Vue',
|
||||
'materials': {
|
||||
'components': [],
|
||||
'snippets': [],
|
||||
'blocks': []
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 1. 初始化
|
||||
function init(cb) {
|
||||
const argv = minimist(process.argv.slice(2))
|
||||
if (argv.apiPath) {
|
||||
apiPath = argv.apiPath
|
||||
}
|
||||
if (argv.tinyVer) {
|
||||
tinyVer = argv.tinyVer
|
||||
}
|
||||
|
||||
// 读菜单
|
||||
shell.cp(path.join(apiPath, '/menus.js'), 'gulp/menus.mjs')
|
||||
shell.sed('-i', 'import.meta.env.VITE_BUILD_TARGET', 'false', 'gulp/menus.mjs')
|
||||
import('./menus.mjs').then((res) => {
|
||||
menus = res.cmpMenus
|
||||
cb()
|
||||
})
|
||||
}
|
||||
|
||||
// 2. 遍历菜单，处理每一个组件
|
||||
function read(cb) {
|
||||
menus.forEach((group) => {
|
||||
const snippetItem = {
|
||||
'group': group.label,
|
||||
'children': []
|
||||
}
|
||||
group.children.forEach((component) => {
|
||||
if (ignoreKeys.includes(component.key)) {
|
||||
return
|
||||
}
|
||||
if (component.key.startsWith('grid-') || component.key.startsWith('chart-')) {
|
||||
return
|
||||
}
|
||||
|
||||
const componentInfo = _readOneComp(component)
|
||||
const componentItem = genComp(componentInfo)
|
||||
const snipItem = genSnip(componentInfo)
|
||||
|
||||
result.data.materials.components.push(componentItem)
|
||||
snippetItem.children.push(snipItem)
|
||||
|
||||
// 特殊的混合组件判断, 比如遍历到form时，要插入 form-item的定义
|
||||
if (mixinKeys[component.key]) {
|
||||
mixinKeys[component.key].forEach((mixin) => {
|
||||
const componentInfo = _readOneComp(component, mixin)
|
||||
const componentItem = genComp(componentInfo)
|
||||
const snipItem = genSnip(componentInfo)
|
||||
|
||||
result.data.materials.components.push(componentItem)
|
||||
snippetItem.children.push(snipItem)
|
||||
})
|
||||
}
|
||||
})
|
||||
result.data.materials.snippets.push(snippetItem)
|
||||
})
|
||||
cb()
|
||||
}
|
||||
|
||||
function _readOneComp(component, mixin = '') {
|
||||
if (!mixin) {
|
||||
shell.echo('---正在读取组件', component.key)
|
||||
const key = component.key
|
||||
const camelizeKey = camelize(key)
|
||||
const cmpName = component.nameCn
|
||||
const desc = readMdDesc(key)
|
||||
const jsStr = shell.cat(`${apiPath}/app/${key}/webdoc/${key}.js`).replace('export default', '(') + ')'
|
||||
const api = eval(jsStr).apis.filter((item) => item.name === key)[0]
|
||||
const props = api?.props || api?.properties || []
|
||||
const events = api?.events || []
|
||||
const slots = api?.slots || []
|
||||
guid++
|
||||
const componentInfo = { id: guid, version: tinyVer, key, camelizeKey, cmpName, desc, props, events, slots }
|
||||
|
||||
return componentInfo
|
||||
} else {
|
||||
shell.echo('---正在读取混入的组件', component.key, mixin.key)
|
||||
const key = mixin.key
|
||||
const camelizeKey = camelize(key)
|
||||
const cmpName = mixin.nameCn
|
||||
const desc = mixin.desc
|
||||
const jsStr =
|
||||
shell.cat(`${apiPath}/app/${component.key}/webdoc/${component.key}.js`).replace('export default', '(') + ')'
|
||||
const api = eval(jsStr).apis.filter((item) => item.name === mixin.key)[0]
|
||||
const props = api?.props || api?.properties || []
|
||||
const events = api?.events || []
|
||||
const slots = api?.slots || []
|
||||
guid++
|
||||
const componentInfo = { id: guid, version: tinyVer, key, camelizeKey, cmpName, desc, props, events, slots }
|
||||
|
||||
return componentInfo
|
||||
}
|
||||
}
|
||||
// 3. 将结果写bundle.json
|
||||
function write(cb) {
|
||||
shell.ShellString(JSON.stringify(result, null, ' ')).to('gulp/bundle.json')
|
||||
cb()
|
||||
}
|
||||
|
||||
// 4. 清除
|
||||
function clean(cb) {
|
||||
shell.rm('gulp/menus.mjs')
|
||||
cb()
|
||||
}
|
||||
|
||||
// 以下辅助方法
|
||||
|
||||
// 转换：button-group ==> ButtonGroup
|
||||
const camelize = (str) => {
|
||||
return str
|
||||
.replace(/-(\w)/g, (_, c) => (c ? c.toUpperCase() : ''))
|
||||
.replace(/^(\w)/g, (_, c) => (c ? c.toUpperCase() : ''))
|
||||
}
|
||||
// 从标签中，提取文字。 <div>常用的操作按钮。</div> ==> 常用的操作按钮。
|
||||
const readMdDesc = (key) => {
|
||||
const mdStr = shell.cat(`${apiPath}/app/${key}/webdoc/${key}.cn.md`)
|
||||
const matched = mdStr.match(/<div>([\w|\s|\u4e00-\u9fa5]*)<\/div>/i)
|
||||
return matched ? matched[1] || '' : ''
|
||||
}
|
||||
const genComp = ({ id, version, key, camelizeKey, cmpName, desc, props, events, slots }) => {
|
||||
const item = {
|
||||
'id': id,
|
||||
'version': version,
|
||||
'name': {
|
||||
'zh_CN': cmpName
|
||||
},
|
||||
'component': 'Tiny' + camelizeKey,
|
||||
'icon': '',
|
||||
'description': desc,
|
||||
'doc_url': '',
|
||||
'screenshot': '',
|
||||
'tags': '',
|
||||
'keywords': '',
|
||||
'dev_mode': 'proCode',
|
||||
'npm': {
|
||||
'package': '@opentiny/vue',
|
||||
'exportName': camelizeKey,
|
||||
'version': version,
|
||||
'destructuring': true
|
||||
},
|
||||
'group': 'component',
|
||||
'configure': {
|
||||
'loop': true,
|
||||
'condition': true,
|
||||
'styles': true,
|
||||
'isContainer': false,
|
||||
'isModal': false,
|
||||
'nestingRule': {
|
||||
'childWhitelist': '',
|
||||
'parentWhitelist': '',
|
||||
'descendantBlacklist': '',
|
||||
'ancestorWhitelist': ''
|
||||
},
|
||||
'isNullNode': false,
|
||||
'isLayout': false,
|
||||
'rootSelector': '',
|
||||
'shortcuts': {
|
||||
'properties': []
|
||||
},
|
||||
'contextMenu': {
|
||||
'actions': [],
|
||||
'disable': []
|
||||
},
|
||||
'framework': 'Vue'
|
||||
},
|
||||
'schema': {
|
||||
'properties': [
|
||||
{
|
||||
'label': {
|
||||
'zh_CN': '基础信息'
|
||||
},
|
||||
'description': {
|
||||
'zh_CN': '基础信息'
|
||||
},
|
||||
'collapse': {
|
||||
'number': 6,
|
||||
'text': {
|
||||
'zh_CN': '显示更多'
|
||||
}
|
||||
},
|
||||
'content': props.map((prop) => genProp(prop))
|
||||
}
|
||||
],
|
||||
'events': {
|
||||
...events.map((event) => genEvent(event)).reduce((pre, curr) => ({ ...pre, ...curr }), {})
|
||||
},
|
||||
'slots': {
|
||||
...slots.map((slot) => genSlot(slot)).reduce((pre, curr) => ({ ...pre, ...curr }), {})
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return item
|
||||
}
|
||||
|
||||
const genProp = ({ name, type, defaultValue, desc }) => {
|
||||
const typeMap = {
|
||||
string: {
|
||||
component: 'MetaInput',
|
||||
props: {}
|
||||
},
|
||||
boolean: {
|
||||
component: 'MetaSwitch',
|
||||
props: {}
|
||||
},
|
||||
number: {
|
||||
component: 'MetaNumberic',
|
||||
props: {}
|
||||
},
|
||||
object: {
|
||||
component: 'MetaCodeEditor',
|
||||
props: {
|
||||
language: 'json'
|
||||
}
|
||||
},
|
||||
array: {
|
||||
component: 'MetaCodeEditor',
|
||||
props: {
|
||||
language: 'json'
|
||||
}
|
||||
},
|
||||
function: {
|
||||
component: 'MetaCodeEditor',
|
||||
props: {
|
||||
language: 'javascript'
|
||||
}
|
||||
}
|
||||
}
|
||||
const normalizeType = type.trim().toLowerCase()
|
||||
|
||||
return {
|
||||
'property': name,
|
||||
'type': type,
|
||||
'defaultValue': defaultValue == '--' ? '' : defaultValue,
|
||||
'label': {
|
||||
'text': {
|
||||
'zh_CN': desc['zh-CN']
|
||||
}
|
||||
},
|
||||
'cols': 12,
|
||||
'rules': [],
|
||||
'hidden': false,
|
||||
'required': true,
|
||||
'readOnly': true,
|
||||
'disabled': true,
|
||||
'widget': typeMap[normalizeType]
|
||||
? typeMap[normalizeType] //
|
||||
: { 'component': '', 'props': {} },
|
||||
'description': {
|
||||
'zh_CN': desc['zh-CN']
|
||||
}
|
||||
}
|
||||
}
|
||||
const genEvent = ({ name, type, defaultValue, desc }) => {
|
||||
return {
|
||||
['on' + camelize(name)]: {
|
||||
'label': {
|
||||
'zh_CN': desc['zh-CN']
|
||||
},
|
||||
'description': {
|
||||
'zh_CN': desc['zh-CN']
|
||||
},
|
||||
'type': 'event',
|
||||
'functionInfo': {
|
||||
'params': [],
|
||||
'returns': {}
|
||||
},
|
||||
'defaultValue': ''
|
||||
}
|
||||
}
|
||||
}
|
||||
const genSlot = ({ name, type, defaultValue, desc }) => {
|
||||
return {
|
||||
[name]: {
|
||||
'label': {
|
||||
'zh_CN': desc['zh-CN']
|
||||
},
|
||||
'description': {
|
||||
'zh_CN': desc['zh-CN']
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const genSnip = ({ id, version, key, camelizeKey, cmpName, desc, props, events, slots }) => {
|
||||
return {
|
||||
'name': {
|
||||
'zh_CN': cmpName
|
||||
},
|
||||
'icon': key,
|
||||
'screenshot': '',
|
||||
'snippetName': 'Tiny' + camelizeKey,
|
||||
'schema': {}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,45 +0,0 @@
|
|||
import gulp from 'gulp'
|
||||
import minimist from 'minimist'
|
||||
import shell from 'shelljs'
|
||||
|
||||
const build = gulp.series(tsup, release, publish)
|
||||
build.description = '构建 @opentiny/renderless'
|
||||
build.flags = {
|
||||
'--ver': '设置版本号，比如 --ver 3.8.7',
|
||||
'--publish -p': '自动发布（提前修改好用户下的.npmrc）'
|
||||
}
|
||||
export default build
|
||||
|
||||
function tsup(cb) {
|
||||
shell.cd('packages/renderless')
|
||||
shell.rm('-rf', 'dist')
|
||||
shell.exec('npx tsup')
|
||||
cb()
|
||||
}
|
||||
|
||||
function release(cb) {
|
||||
const argv = minimist(process.argv.slice(2))
|
||||
if (!argv.ver) {
|
||||
cb(new Error('必须填写 --ver 参数'))
|
||||
}
|
||||
|
||||
shell.cp('README.md', 'dist/README.md')
|
||||
|
||||
const pck = JSON.parse(shell.cat('package.json'))
|
||||
delete pck.exports
|
||||
delete pck.private
|
||||
pck.version = argv.ver
|
||||
|
||||
shell.ShellString(JSON.stringify(pck, null, ' ')).to('dist/package.json')
|
||||
|
||||
cb()
|
||||
}
|
||||
|
||||
function publish(cb) {
|
||||
const argv = minimist(process.argv.slice(2))
|
||||
if (argv.p || argv.publish) {
|
||||
shell.cd('dist')
|
||||
shell.exec('npm publish')
|
||||
}
|
||||
cb()
|
||||
}
|
||||
|
|
@ -1,117 +0,0 @@
|
|||
import gulp from 'gulp'
|
||||
import less from 'gulp-less'
|
||||
import cssmin from 'gulp-clean-css'
|
||||
import svgInline from 'gulp-svg-inline'
|
||||
import prefixer from 'gulp-autoprefixer'
|
||||
import minimist from 'minimist'
|
||||
import shell from 'shelljs'
|
||||
import themeConcat from './themeConcat.mjs'
|
||||
|
||||
const argv = minimist(process.argv.slice(2))
|
||||
|
||||
const build = gulp.series(
|
||||
changeDir,
|
||||
themeConcat,
|
||||
cleanDist,
|
||||
compiler, // 编译
|
||||
gulp.parallel(copyThemeJs, copySvgs, copyImages), // 拷贝
|
||||
updateImageUrl,
|
||||
release,
|
||||
publish
|
||||
)
|
||||
build.description = '构建 @opentiny/theme'
|
||||
build.flags = {
|
||||
'--ver': '设置版本号，比如 --ver 3.8.7',
|
||||
'--mobile -m': '编译mobile',
|
||||
'--publish -p': '自动发布（提前修改好用户下的.npmrc）'
|
||||
}
|
||||
export default build
|
||||
|
||||
function changeDir(cb) {
|
||||
if (argv.m || argv.mobile) {
|
||||
shell.cd('packages/theme-mobile')
|
||||
} else {
|
||||
shell.cd('packages/theme')
|
||||
}
|
||||
cb()
|
||||
}
|
||||
|
||||
function cleanDist(cb) {
|
||||
shell.rm('-rf', 'dist')
|
||||
cb()
|
||||
}
|
||||
const source = 'src'
|
||||
const dist = 'dist'
|
||||
|
||||
// 编译所有的 index.less文件
|
||||
function compiler() {
|
||||
return gulp
|
||||
.src([`${source}/**/index.less`, `${source}/index.less`])
|
||||
.pipe(less())
|
||||
.pipe(
|
||||
prefixer({
|
||||
borwsers: ['last 1 version', '> 1%', 'not ie <= 8'],
|
||||
cascade: true,
|
||||
remove: true
|
||||
})
|
||||
)
|
||||
.pipe(
|
||||
svgInline({
|
||||
maxImageSize: 1 * 1024 * 1024,
|
||||
extensions: [/\.svg/gi]
|
||||
})
|
||||
)
|
||||
.pipe(cssmin())
|
||||
.pipe(gulp.dest(dist))
|
||||
}
|
||||
|
||||
// 这一步是否可以去掉了？？？？？？？？？？
|
||||
function copyThemeJs() {
|
||||
return gulp
|
||||
.src([`${source}/**/*.js`], { allowEmpty: true }) //
|
||||
.pipe(gulp.dest(`${dist}`))
|
||||
}
|
||||
|
||||
function copySvgs() {
|
||||
return gulp
|
||||
.src([`${source}/svgs/**`]) //
|
||||
.pipe(gulp.dest(`${dist}/svgs`))
|
||||
}
|
||||
|
||||
function copyImages() {
|
||||
return gulp
|
||||
.src([`${source}/images/**`]) //
|
||||
.pipe(gulp.dest(`${dist}/images`))
|
||||
}
|
||||
|
||||
// 将 dist/index.css 图片资源路径 ../images/ 改为 images
|
||||
function updateImageUrl(cb) {
|
||||
shell.sed('-i', /url\(\.\.\/images/g, 'url(images', 'dist/index.css')
|
||||
|
||||
cb()
|
||||
}
|
||||
|
||||
function release(cb) {
|
||||
if (!argv.ver) {
|
||||
cb(new Error('必须填写 --ver 参数'))
|
||||
}
|
||||
|
||||
shell.cp('README.md', 'dist/README.md')
|
||||
|
||||
const pck = JSON.parse(shell.cat('package.json'))
|
||||
delete pck.exports
|
||||
delete pck.private
|
||||
pck.version = argv.ver
|
||||
|
||||
shell.ShellString(JSON.stringify(pck, null, ' ')).to('dist/package.json')
|
||||
|
||||
cb()
|
||||
}
|
||||
|
||||
function publish(cb) {
|
||||
if (argv.p || argv.publish) {
|
||||
shell.cd('dist')
|
||||
shell.exec('npm publish')
|
||||
}
|
||||
cb()
|
||||
}
|
||||
|
|
@ -1,5 +0,0 @@
|
|||
build.description = '构建 @opentiny/vue，待实现'
|
||||
|
||||
export default function build(cb) {
|
||||
cb()
|
||||
}
|
||||
|
|
@ -1,71 +0,0 @@
|
|||
import fs from 'node:fs'
|
||||
import fg from 'fast-glob'
|
||||
import gulp from 'gulp'
|
||||
import minimist from 'minimist'
|
||||
|
||||
themeConcat.description = '将 theme/src中所有的smb-theme.js aurora-theme.js合并到一起，放到theme/src/theme对应目录中去'
|
||||
themeConcat.flags = {
|
||||
'--watch -w': '开发时，进入watch模式，监听变化并立即合并 *-theme.js'
|
||||
}
|
||||
|
||||
export default function themeConcat(cb) {
|
||||
const argv = minimist(process.argv.slice(2))
|
||||
concat(cb)
|
||||
if (argv.w || argv.watch) {
|
||||
gulp.watch('packages/theme/src/**/*-theme.js', concat)
|
||||
}
|
||||
}
|
||||
|
||||
function concat(cb) {
|
||||
fg(['packages/theme/src/**/*-theme.js']).then((files) => {
|
||||
const ignoreNames = ['base', 'theme']
|
||||
// 1、遍历，返回全部 [{ name:'button', theme:'smb-theme'} ......]
|
||||
const components = files
|
||||
.map((file) => {
|
||||
const arr = file.split('/')
|
||||
const themeFile = arr.slice(-1)[0]
|
||||
const content = fs.readFileSync(file, { encoding: 'utf8' })
|
||||
return {
|
||||
name: arr.slice(-2)[0],
|
||||
theme: themeFile.substring(0, themeFile.indexOf('.')),
|
||||
content
|
||||
}
|
||||
})
|
||||
.filter((item) => !ignoreNames.includes(item.name))
|
||||
|
||||
// 2、把混在一起的主题js文件分开，返回 {'aurora-theme':[], 'smb-theme':[]}
|
||||
const themes = {}
|
||||
components.forEach((comp) => {
|
||||
const key = comp.theme
|
||||
if (!themes[key]) {
|
||||
themes[key] = [comp]
|
||||
} else {
|
||||
themes[key].push(comp)
|
||||
}
|
||||
})
|
||||
|
||||
// 3、写入各自的component.js 文件
|
||||
Object.entries(themes).forEach(([themeKey, components]) => {
|
||||
// 抓取每一个 xxx-theme.js文件，每个文件都是一个对象体
|
||||
let themeObjs = components.map((component) => {
|
||||
let src = component.content
|
||||
src = src.replace(/export[\s\S]*\{/, '{')
|
||||
src = `(${src})`
|
||||
// eslint-disable-next-line no-eval
|
||||
return eval(src)
|
||||
})
|
||||
|
||||
// 把对象体的所有键值组合为一个对象
|
||||
let contents = 'export const concatTheme = {\n'
|
||||
themeObjs.forEach((obj) => {
|
||||
Object.keys(obj).forEach((token) => {
|
||||
contents += ` '${token}': '${obj[token]}',\n`
|
||||
})
|
||||
})
|
||||
contents += '}\n'
|
||||
|
||||
fs.writeFileSync(`packages/theme/src/theme/${themeKey}/component.js`, contents)
|
||||
})
|
||||
cb()
|
||||
})
|
||||
}
|
||||
|
|
@ -1,37 +0,0 @@
|
|||
// 组件和文件夹名映射表
|
||||
export default {
|
||||
// 开源组件
|
||||
'breadcrumb-item': 'breadcrumb',
|
||||
'carousel-item': 'carousel',
|
||||
'cascader-menu': 'cascader',
|
||||
'cascader-node': 'cascader',
|
||||
'checkbox-button': 'checkbox',
|
||||
'checkbox-group': 'checkbox',
|
||||
'collapse-item': 'collapse',
|
||||
'credit-card': 'credit-card-form',
|
||||
'credit-card-form': 'credit-card-form',
|
||||
'picker': 'date-picker',
|
||||
'time-spinner': 'date-picker',
|
||||
'date-panel': 'date-picker',
|
||||
'date-range': 'date-picker',
|
||||
'date-table': 'date-picker',
|
||||
'month-table': 'date-picker',
|
||||
'time-panel': 'date-picker',
|
||||
'time-range': 'date-picker',
|
||||
'year-table': 'date-picker',
|
||||
'dropdown-item': 'dropdown',
|
||||
'dropdown-menu': 'dropdown',
|
||||
'upload': 'file-upload',
|
||||
'upload-dragger': 'file-upload',
|
||||
'upload-list': 'file-upload',
|
||||
'form-item': 'form',
|
||||
'image-viewer': 'image',
|
||||
'tall-storage': 'input',
|
||||
'radio-button': 'radio',
|
||||
'radio-group': 'radio',
|
||||
'scroll-text': 'scroll-text',
|
||||
'option-group': 'select',
|
||||
'select-dropdown': 'select',
|
||||
'card-template': 'user-contact',
|
||||
espace: 'user-contact'
|
||||
}
|
||||
|
|
@ -1,144 +0,0 @@
|
|||
import gulp from 'gulp'
|
||||
import fs from 'fs-extra'
|
||||
import transform from 'gulp-transform'
|
||||
import xlsx from 'node-xlsx'
|
||||
import aliasCompName from './themeJson.alias.mjs'
|
||||
|
||||
const build = gulp.series(parseVars, writeJson, buildExcel)
|
||||
build.description = '生成theme.json 和 themeExcel文件'
|
||||
|
||||
export default build
|
||||
|
||||
// 指定哪些目录的`vars.less`不需要处理
|
||||
const ignoreNames = ['src', 'base']
|
||||
// css规则的正则: '--color: var(--color);' => [str, --color, var(--color)]
|
||||
const ruleReg = /([\w|\-|_]*): *([\w|\-|\_|(|)]*);/
|
||||
|
||||
function formatRule(name, key, value, desc) {
|
||||
const hasHide = desc.includes('(hide)')
|
||||
desc = desc.replace('(hide)', '')
|
||||
|
||||
return `
|
||||
"${key}": {
|
||||
"id": "${key}",
|
||||
"key": "${key}",
|
||||
"variable": "${value}",
|
||||
"value": "${value}",
|
||||
"desc": "${desc}",
|
||||
"descEn": "${desc}",
|
||||
"component": "${name}",
|
||||
"componentDesc": "",
|
||||
"componentDescEn": "",
|
||||
"selector": ".tiny-${name}",
|
||||
"type": "",
|
||||
"group": "",
|
||||
"isImportant": "false",
|
||||
"ui": "",
|
||||
"show": 1,
|
||||
"configurable": ${hasHide ? 0 : 1},
|
||||
"isOpen": true
|
||||
},`
|
||||
}
|
||||
|
||||
// 处理一个vars.less文件
|
||||
function parseFile(component) {
|
||||
const name = aliasCompName[component.name] || component.name
|
||||
let formated = []
|
||||
let lessLines = component.content.split('\n')
|
||||
lessLines = lessLines.map((line) => line.trim())
|
||||
|
||||
// 以 .component-css.........为起点行搜索。没找到，则跳出
|
||||
let startRow = 0
|
||||
while (startRow < lessLines.length && !lessLines[startRow].startsWith('.')) {
|
||||
startRow++
|
||||
}
|
||||
if (startRow === lessLines.length) {
|
||||
return []
|
||||
}
|
||||
let desc = '未知变量'
|
||||
|
||||
for (let row = startRow + 1; row < lessLines.length; row++) {
|
||||
const line = lessLines[row]
|
||||
// 跳过空行
|
||||
if (line.length === 0) continue
|
||||
// 注释行
|
||||
if (line.startsWith('//')) {
|
||||
desc = line.slice(2).trim()
|
||||
continue
|
||||
}
|
||||
// 规则行
|
||||
const matches = line.match(ruleReg)
|
||||
if (matches) {
|
||||
if (desc === '未知变量') component.noDescCount++
|
||||
|
||||
let [_, key, value] = matches
|
||||
formated.push(formatRule(name, key, value, desc))
|
||||
desc = '未知变量'
|
||||
}
|
||||
}
|
||||
component.ruleCount = formated.length
|
||||
return formated
|
||||
}
|
||||
|
||||
const components = []
|
||||
// 解析每个文件，将结果保存到 components 数据
|
||||
function parseVars() {
|
||||
return gulp.src('packages/theme/src/**/vars.less').pipe(
|
||||
transform('utf8', (content, fileObj) => {
|
||||
const path = fileObj.path
|
||||
const name = path.split('\\').slice(-2)[0]
|
||||
if (!ignoreNames.includes(name)) {
|
||||
components.push({
|
||||
name,
|
||||
content: parseFile({ name, content, ruleCount: 0, noDescCount: 0 })
|
||||
})
|
||||
}
|
||||
return '' // 不写文件
|
||||
})
|
||||
)
|
||||
}
|
||||
|
||||
// 将 components 数据写入文件
|
||||
function writeJson(cb) {
|
||||
// 此处应用使用reduce插件来合并结果。 但gulp的reduce不好用。
|
||||
const parsed = components.map((comp) => comp.content).flat()
|
||||
let writedContent = parsed.join('').slice(1, -1) // 去除最后一个逗号
|
||||
writedContent = `{\n${writedContent}\n}`
|
||||
fs.writeFileSync('packages/theme/scripts/theme.json', writedContent)
|
||||
cb()
|
||||
}
|
||||
|
||||
const titleArr = (
|
||||
'id,key,variable（可选）,value（可选）,desc,descEn,component,componentDesc,componentDescEn,' +
|
||||
'selector,type,group,isImportant,ui（所属的框架）,show,configurable'
|
||||
).split(',')
|
||||
const fileName = 'themeExcel'
|
||||
|
||||
export function buildExcel(cb) {
|
||||
let themeData = fs.readFileSync('packages/theme/scripts/theme.json', 'utf-8').toString()
|
||||
themeData = JSON.parse(themeData)
|
||||
const openXlsxObj = {} // 输出： {button:[ [标题行], [每一个变量的一行值] ]}
|
||||
Object.values(themeData)
|
||||
.filter((item) => item.isOpen)
|
||||
.forEach((item) => {
|
||||
delete item.isOpen
|
||||
item.ui = '@opentiny/vue'
|
||||
openXlsxObj[item.component] = openXlsxObj[item.component]
|
||||
? [...openXlsxObj[item.component], Object.values(item)]
|
||||
: [titleArr, Object.values(item)]
|
||||
})
|
||||
// 输出： [ {name:button, data:[ [],[] ]}]
|
||||
const excelData = Object.entries(openXlsxObj).map(([key, value]) => {
|
||||
return { name: key + '配置化', data: value }
|
||||
})
|
||||
|
||||
// 写excel
|
||||
const buffer = xlsx.build(excelData)
|
||||
fs.writeFile(`packages/theme/scripts/${fileName}.xlsx`, buffer, (err) => {
|
||||
if (err) {
|
||||
return console.warn(`写入${fileName}失败`)
|
||||
}
|
||||
})
|
||||
|
||||
cb()
|
||||
}
|
||||
|
|
@ -1,8 +0,0 @@
|
|||
import buildVue from './gulp/buildVue.mjs'
|
||||
import buildRenderless from './gulp/buildRenderless.mjs'
|
||||
import buildTheme from './gulp/buildTheme.mjs'
|
||||
import themeJson from './gulp/themeJson.mjs'
|
||||
import themeConcat from './gulp/themeConcat.mjs'
|
||||
import lowcode from './gulp/buildLowcodeBundle.mjs'
|
||||
|
||||
export { themeJson, themeConcat, buildVue, buildRenderless, buildTheme, lowcode }
|
||||
|
|
@ -65,7 +65,6 @@
|
|||
"build:theme": "pnpm -C packages/theme build:fast",
|
||||
"build:themeSaas": "pnpm -C packages/theme-saas build:fast",
|
||||
"build:themeMobile": "pnpm -C packages/theme-mobile build:fast",
|
||||
"build:themejson": "gulp themeJson",
|
||||
"build:internals": "pnpm \"--filter=./internals/*\" build",
|
||||
"build:vite-import": "pnpm --filter @opentiny/vue-vite-import build",
|
||||
"build:virtual-template": "pnpm --filter @opentiny-internal/unplugin-virtual-template build",
|
||||
|
|
|
|||
|
|
@ -1,83 +0,0 @@
|
|||
/** 把图标打包为 css, 参考：https://antfu.me/posts/icons-in-pure-css-zh */
|
||||
import gulp from 'gulp'
|
||||
import transform from 'gulp-transform'
|
||||
import concat from 'gulp-concat'
|
||||
import svgo from 'svgo'
|
||||
|
||||
// svg的明文替换
|
||||
function encodeSvg(svg) {
|
||||
return svg
|
||||
.replace('<svg', ~svg.indexOf('xmlns') ? '<svg' : '<svg xmlns="http://www.w3.org/2000/svg"')
|
||||
.replace(/"/g, "'")
|
||||
.replace(/%/g, '%25')
|
||||
.replace(/#/g, '%23')
|
||||
.replace(/{/g, '%7B')
|
||||
.replace(/}/g, '%7D')
|
||||
.replace(/</g, '%3C')
|
||||
.replace(/>/g, '%3E')
|
||||
}
|
||||
|
||||
function genClass(name, data) {
|
||||
const mode = data.includes('currentColor') ? 'mask' : 'background-img'
|
||||
|
||||
const uri = `url("data:image/svg+xml;utf8,${encodeSvg(data)}")`
|
||||
|
||||
let rules
|
||||
// 单色图标
|
||||
if (mode === 'mask') {
|
||||
rules = {
|
||||
'mask': `${uri} no-repeat`,
|
||||
'mask-size': '100% 100%',
|
||||
'-webkit-mask-size': '100% 100%',
|
||||
'background-color': 'currentColor',
|
||||
'height': '1em',
|
||||
'width': '1em',
|
||||
'display': 'inline-block'
|
||||
}
|
||||
}
|
||||
// 彩色图标
|
||||
else {
|
||||
rules = {
|
||||
'background': `${uri} no-repeat`,
|
||||
'background-size': '100% 100%',
|
||||
'background-color': 'transparent',
|
||||
'height': '1em',
|
||||
'width': '1em',
|
||||
'display': 'inline-block'
|
||||
}
|
||||
}
|
||||
const rulesStr = Object.keys(rules)
|
||||
.map((key) => `${key}:${rules[key]};`)
|
||||
.join('')
|
||||
return `.ticon-${name}{${rulesStr}}`
|
||||
}
|
||||
|
||||
function buildSvg(cb) {
|
||||
gulp
|
||||
.src('../src/svgs/*.svg')
|
||||
.pipe(
|
||||
// content是svg内容， file:File对象
|
||||
transform('utf8', function (content, file) {
|
||||
const name = file.basename.slice(0, -4)
|
||||
const data = svgo.optimize(content).data
|
||||
return genClass(name, data)
|
||||
})
|
||||
)
|
||||
.pipe(concat('icon.css'))
|
||||
.pipe(gulp.dest('../src/base'))
|
||||
// 生成测试页面
|
||||
gulp
|
||||
.src('../src/svgs/*.svg')
|
||||
.pipe(
|
||||
transform('utf8', function (content, file) {
|
||||
const name = file.basename.slice(0, -4)
|
||||
return `<i class="ticon-${name}"></i>`
|
||||
})
|
||||
)
|
||||
.pipe(concat('icon.html'))
|
||||
.pipe(gulp.dest('../src/base'))
|
||||
|
||||
cb()
|
||||
}
|
||||
|
||||
export { buildSvg }
|
||||
|
|
@ -1,257 +0,0 @@
|
|||
import fs from 'node:fs'
|
||||
import fsExtra from 'fs-extra'
|
||||
|
||||
const indexLessPath = 'index.less'
|
||||
const indexJsPath = 'index.js'
|
||||
const smbThemeName = 'smb-theme'
|
||||
const auroraThemeName = 'aurora-theme'
|
||||
const originRootPath = '../src/'
|
||||
const originThemeRootPath = `${originRootPath}theme/`
|
||||
const basePath = '/base/'
|
||||
|
||||
const emptyThemeContent = `@import '../../{{}}/index.less';`
|
||||
|
||||
const baseContent = fs.readFileSync('../src/base/basic-var.less', 'utf8')
|
||||
|
||||
const scopedTitle = `@import '../../custom.less';
|
||||
@import '../../{{}}/index.less';
|
||||
`
|
||||
|
||||
const scopedContent = `
|
||||
@{compName}-prefix-cls: ~'@{css-prefix}{compName}';
|
||||
|
||||
.@{{compName}-prefix-cls}[class*=tiny] {
|
||||
{var}
|
||||
}`
|
||||
|
||||
const buildThemePathMap = {
|
||||
[auroraThemeName]: `${originRootPath}${auroraThemeName}${basePath}`,
|
||||
[smbThemeName]: `${originRootPath}${smbThemeName}${basePath}`
|
||||
}
|
||||
|
||||
const cssScopedMap = {
|
||||
'anchor': 'anchor__wrapper',
|
||||
'badge': 'badge__wrapper',
|
||||
'crop': 'crop__wrapper',
|
||||
'date-panel': 'picker-panel',
|
||||
'date-range': 'date-range-picker',
|
||||
'detail-page': 'grid-modal__box',
|
||||
'dialog-box': 'dialog-box__wrapper',
|
||||
'error-page': 'errortips__box',
|
||||
'floatbar': 'float-bar',
|
||||
'flowchart': 'flow-chart',
|
||||
'grid': 'grid__wrapper',
|
||||
'input': ['input', 'input-group'],
|
||||
'option': 'select-dropdown',
|
||||
'pager': ['pager', 'pager__selector'],
|
||||
'picker': 'date-editor',
|
||||
'pop-upload': ['popupload__modal', 'popupload'],
|
||||
'popconfirm': ['popconfirm', 'popconfirm-popover'],
|
||||
'popeditor': ['dialog-box', 'popeditor'],
|
||||
'scroll-text': 'scroll-text__wrapper',
|
||||
'slider': 'slider-container',
|
||||
'tabs': ['tabs__more-dropdown', 'tabs'],
|
||||
'time-range': 'time-range-picker',
|
||||
'tip': 'tips',
|
||||
'tree': ['tree', 'tree__del-popover'],
|
||||
'upload': 'file-upload',
|
||||
'upload-dragger': 'file-upload',
|
||||
'upload-list': 'file-upload',
|
||||
'user-account': 'user-contact'
|
||||
}
|
||||
|
||||
const createTheme = (callbackFn) => {
|
||||
const createDir = (path, fn = null) => {
|
||||
if (isPathExist(path)) {
|
||||
return
|
||||
}
|
||||
|
||||
fs.mkdirSync(path)
|
||||
|
||||
fn && fn()
|
||||
}
|
||||
|
||||
const beginCreateDir = () => {
|
||||
for (let k in buildThemePathMap) {
|
||||
createDir(originRootPath + k)
|
||||
}
|
||||
readDir(originRootPath, 'less')
|
||||
readDir(originThemeRootPath, 'js')
|
||||
callbackFn()
|
||||
}
|
||||
|
||||
const readDir = (originPath, type) => {
|
||||
const fileNames = fs.readdirSync(originPath)
|
||||
fileNames.forEach((fileDir) => {
|
||||
mkStat(originPath, fileDir, type)
|
||||
})
|
||||
}
|
||||
|
||||
let isFinalTimer = null
|
||||
|
||||
const copyDir = (originPath, targetPath) => {
|
||||
fsExtra.copySync(originPath, targetPath)
|
||||
}
|
||||
|
||||
const isPathExist = (path) => {
|
||||
return fs.existsSync(path)
|
||||
}
|
||||
|
||||
const mkStat = (originPath, fileDir, type) => {
|
||||
const statPath = `${originPath}/${fileDir}`
|
||||
const smbPath = `${originPath}/${smbThemeName}/${fileDir}`
|
||||
const auroraPath = `${originPath}/${auroraThemeName}/${fileDir}`
|
||||
|
||||
if (!isPathExist(statPath)) {
|
||||
return
|
||||
}
|
||||
const data = fs.statSync(statPath)
|
||||
|
||||
if (data.isDirectory()) {
|
||||
if (fileDir !== 'base' && fileDir !== 'theme') {
|
||||
if (fileDir === 'images') {
|
||||
copyDir(statPath, smbPath)
|
||||
copyDir(statPath, auroraPath)
|
||||
} else {
|
||||
isFileExist(originPath, fileDir, type)
|
||||
}
|
||||
}
|
||||
} else {
|
||||
if (fileDir === 'index.less') {
|
||||
copyDir(statPath, smbPath)
|
||||
copyDir(statPath, auroraPath)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const isFileExist = (originPath, fileDir, type) => {
|
||||
const parentPath = `${originPath}${fileDir}`
|
||||
const path = `${parentPath}/index.${type}`
|
||||
const exist = fs.existsSync(path)
|
||||
if (exist) {
|
||||
if (type === 'less') {
|
||||
readComponentsFile(fileDir)
|
||||
} else if (type === 'js') {
|
||||
readThemeFile(fileDir)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const writeThemeIndexLess = (path, fileDir, themeName) => {
|
||||
const parentPath = `${originRootPath}${themeName}/${fileDir}`
|
||||
|
||||
const writeTheme = () => {
|
||||
if (!isPathExist(path)) {
|
||||
writeFile(parentPath + '/index.less', emptyThemeContent.replace('{{}}', fileDir))
|
||||
return
|
||||
}
|
||||
|
||||
const data = fs.statSync(path)
|
||||
|
||||
if (!data.isDirectory()) {
|
||||
import(path).then((obj) => {
|
||||
let newDataStr = ''
|
||||
Object.values(obj).forEach((value) => {
|
||||
Object.keys(value).forEach((key, index) => {
|
||||
const newValue = `--${key}: ${value[key]};`
|
||||
newDataStr += index !== 0 ? `\n ${newValue}` : newValue
|
||||
})
|
||||
})
|
||||
let scropedData = scopedTitle.replace('{{}}', fileDir)
|
||||
|
||||
if (cssScopedMap[fileDir]) {
|
||||
if (Array.isArray(cssScopedMap[fileDir])) {
|
||||
cssScopedMap[fileDir].forEach((item) => {
|
||||
scropedData += scopedContent.replace(/\{compName\}/g, item).replace(/\{var\}/g, newDataStr)
|
||||
})
|
||||
} else {
|
||||
scropedData += scopedContent
|
||||
.replace(/\{compName\}/g, cssScopedMap[fileDir])
|
||||
.replace(/\{var\}/g, newDataStr)
|
||||
}
|
||||
} else {
|
||||
scropedData += scopedContent.replace(/\{compName\}/g, fileDir).replace(/\{var\}/g, newDataStr)
|
||||
}
|
||||
|
||||
writeFile(parentPath + '/index.less', scropedData)
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
createDir(parentPath, writeTheme)
|
||||
}
|
||||
|
||||
const readComponentsFile = (fileDir) => {
|
||||
if (fileDir === auroraThemeName || fileDir === smbThemeName) {
|
||||
return
|
||||
}
|
||||
|
||||
const indexPath = `${originRootPath}/${fileDir}/${indexLessPath}`
|
||||
|
||||
if (!isPathExist(indexPath)) {
|
||||
return
|
||||
}
|
||||
|
||||
const smbPath = `${originRootPath}/${fileDir}/${smbThemeName}.js`
|
||||
const auroraPath = `${originRootPath}/${fileDir}/${auroraThemeName}.js`
|
||||
const dataStr = fs.readFileSync(indexPath, 'utf8')
|
||||
|
||||
// // 写入smb-theme/**/index.less
|
||||
writeThemeIndexLess(smbPath, fileDir, smbThemeName)
|
||||
|
||||
// 写入aurora-theme/**/index.less
|
||||
writeThemeIndexLess(auroraPath, fileDir, auroraThemeName)
|
||||
}
|
||||
|
||||
const readThemeFile = (fileDir) => {
|
||||
const indexPath = `${originThemeRootPath}/${fileDir}/${indexJsPath}`
|
||||
|
||||
if (!buildThemePathMap[fileDir]) {
|
||||
return
|
||||
}
|
||||
|
||||
if (!isPathExist(indexPath)) {
|
||||
return
|
||||
}
|
||||
|
||||
const dataStr = fs.readFileSync(indexPath, 'utf8')
|
||||
|
||||
createDir(buildThemePathMap[fileDir])
|
||||
|
||||
const startIndex = dataStr.indexOf('{') - 1
|
||||
const endIndex = dataStr.indexOf('}')
|
||||
let newDataStr = dataStr.slice(startIndex, endIndex)
|
||||
const lastIndex = newDataStr.lastIndexOf("'")
|
||||
newDataStr =
|
||||
newDataStr
|
||||
.slice(0, lastIndex)
|
||||
.replace(/\'ti-/g, '--ti-')
|
||||
.replace(/\'/g, '')
|
||||
.replace(/\,\n/g, ';\n')
|
||||
.replace(/\, \/\//g, '; //')
|
||||
.replace('{', '') + ';\n}'
|
||||
|
||||
newDataStr = baseContent.replace('}', newDataStr)
|
||||
|
||||
writeFile(buildThemePathMap[fileDir] + '/index.less', newDataStr)
|
||||
}
|
||||
|
||||
const writeFile = (filePath, data) => {
|
||||
fs.writeFileSync(filePath, data, 'utf8')
|
||||
}
|
||||
|
||||
beginCreateDir()
|
||||
}
|
||||
|
||||
const removeDir = (callbackFn) => {
|
||||
for (let k in buildThemePathMap) {
|
||||
fsExtra.remove(`${originRootPath}${k}`, (err) => {
|
||||
if (err) {
|
||||
console.log('removeDir', err)
|
||||
}
|
||||
callbackFn()
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
export { createTheme, removeDir }
|
||||
|
|
@ -1,7 +1,7 @@
|
|||
/**
|
||||
* 打包 theme 目录到 dist 目录
|
||||
*/
|
||||
|
||||
import path from 'node:path'
|
||||
import gulp from 'gulp'
|
||||
import less from 'gulp-less'
|
||||
import cssmin from 'gulp-clean-css'
|
||||
|
|
@ -9,38 +9,39 @@ import svgInline from 'gulp-svg-inline'
|
|||
import prefixer from 'gulp-autoprefixer'
|
||||
import fg from 'fast-glob'
|
||||
import fs from 'node:fs'
|
||||
import { createTheme, removeDir } from './edit‐dir‐theme.js'
|
||||
import { buildSvg } from './build-svg-to-css.js'
|
||||
|
||||
const source = '../src'
|
||||
const dist = '../dist'
|
||||
const distSmb = '../dist/smb-theme'
|
||||
const distAurora = '../dist/aurora-theme'
|
||||
const svgInlineOption = {
|
||||
maxImageSize: 1 * 1024 * 1024,
|
||||
extensions: [/\.svg/gi]
|
||||
}
|
||||
|
||||
// 将所有组件下的index.less合并到src下的index.less
|
||||
const fileList = fg.sync('../src/*/index.less')
|
||||
const importStr = fileList
|
||||
.map((filePath) => filePath.replace('../src/', './'))
|
||||
.map((path) => `@import '${path}';`)
|
||||
.join('\n')
|
||||
const note = fs.readFileSync('../src/index.less', { encoding: 'utf-8' }).match(/(^\/\*\*.+?\*\/)/s)[0]
|
||||
fs.writeFileSync('../src/index.less', `${note}\n\n${importStr}`)
|
||||
|
||||
gulp.task('build-dir', createTheme)
|
||||
|
||||
gulp.task('build-svg', buildSvg)
|
||||
|
||||
function _concatFiles(srcNames, targetName) {
|
||||
const fileList = fg.sync(srcNames)
|
||||
const importStr = fileList
|
||||
.map((filePath) => filePath.replace('../src/', './'))
|
||||
.map((path) => `@import '${path}';`)
|
||||
.join('\n')
|
||||
fs.writeFileSync(targetName, importStr)
|
||||
}
|
||||
// 1、将所有组件下的index.less合并到src下的index.less
|
||||
function concatIndex(cb) {
|
||||
_concatFiles('../src/*/index.less', '../src/index.less')
|
||||
cb()
|
||||
}
|
||||
// 2、拼接所有组件的 old-theme.less 到一起 old-theme-index.less
|
||||
function concatOldTheme(cb) {
|
||||
_concatFiles('../src/*/old-theme.less', '../src/old-theme.less')
|
||||
cb()
|
||||
}
|
||||
// 3、编译
|
||||
gulp.task('compile', () => {
|
||||
return gulp
|
||||
.src([
|
||||
`${source}/**/index.less`,
|
||||
`${source}/aurora-theme/**/index.less`,
|
||||
`${source}/smb-theme/**/index.less`,
|
||||
`${source}/index.less`
|
||||
`${source}/**/index.less`, // 编译默认主题
|
||||
`${source}/index.less`,
|
||||
`${source}/old-theme.less` // 编译旧主题
|
||||
])
|
||||
.pipe(svgInline(svgInlineOption))
|
||||
.pipe(less())
|
||||
|
|
@ -56,41 +57,22 @@ gulp.task('compile', () => {
|
|||
.pipe(gulp.dest(dist))
|
||||
})
|
||||
|
||||
gulp.task('copycssvar', () => {
|
||||
return gulp
|
||||
.src([`${source}/**/*.js`, `${source}/**/*.ts`, `${source}/index.js`], { allowEmpty: true })
|
||||
.pipe(gulp.dest(`${dist}`))
|
||||
})
|
||||
|
||||
// 4、把 src/svgs 复制到 dist/svgs
|
||||
gulp.task('copysvgs', () => {
|
||||
return gulp.src([`${source}/svgs/**`]).pipe(gulp.dest(`${dist}/svgs`))
|
||||
})
|
||||
|
||||
// 5、把 src/images 复制到 dist/images
|
||||
gulp.task('copyimage', () => {
|
||||
return gulp.src([`${source}/images/**`]).pipe(gulp.dest(`${dist}/images`))
|
||||
})
|
||||
|
||||
gulp.task('copyimage-aurora', () => {
|
||||
return gulp.src([`${source}/aurora-theme/images/**`]).pipe(gulp.dest(`${distAurora}/images`))
|
||||
})
|
||||
// 6、将 dist 目录 index.css 图片资源路径 ../images/ 改为 images
|
||||
function replaceImagesUrl(cb) {
|
||||
const entryFile = path.join('../dist', 'index.css')
|
||||
let file = fs.readFileSync(entryFile, 'utf8')
|
||||
file = file.replace(/url\(\.\.\/images\//g, 'url(images/')
|
||||
fs.writeFileSync(entryFile, file, 'utf8')
|
||||
cb()
|
||||
}
|
||||
|
||||
gulp.task('copyimage-smb', () => {
|
||||
return gulp.src([`${source}/smb-theme/images/**`]).pipe(gulp.dest(`${distSmb}/images`))
|
||||
})
|
||||
|
||||
gulp.task('remove-dir', removeDir)
|
||||
|
||||
gulp.task(
|
||||
'build',
|
||||
gulp.series(
|
||||
'build-dir',
|
||||
// 'build-svg',
|
||||
'compile',
|
||||
'copycssvar',
|
||||
'copysvgs',
|
||||
'copyimage',
|
||||
'copyimage-aurora',
|
||||
'copyimage-smb',
|
||||
'remove-dir'
|
||||
)
|
||||
)
|
||||
gulp.task('build', gulp.series(concatIndex, concatOldTheme, 'compile', 'copysvgs', 'copyimage', replaceImagesUrl))
|
||||
|
|
|
|||
|
|
@ -1,14 +0,0 @@
|
|||
import { resolve } from 'node:path'
|
||||
import { promises as fsPromises } from 'node:fs'
|
||||
|
||||
const root = resolve('./')
|
||||
|
||||
async function run() {
|
||||
const content = await fsPromises.readFile(resolve(root, 'package.json'), 'utf8')
|
||||
const packageJson = JSON.parse(content)
|
||||
delete packageJson.exports
|
||||
delete packageJson.private
|
||||
await fsPromises.writeFile(resolve(root, 'dist/package.json'), JSON.stringify(packageJson, null, 2))
|
||||
}
|
||||
|
||||
run()
|
||||
|
|
@ -1,10 +1,12 @@
|
|||
/**
|
||||
* 将 dist 目录生成 TGZ 的压缩包 fs.cp 需要node 18.0+
|
||||
*/
|
||||
|
||||
import fs from 'node:fs'
|
||||
import path from 'node:path'
|
||||
|
||||
// 3、复制package.json/README.md到dist目录
|
||||
fs.copyFileSync('package.json', path.join('dist', 'package.json'))
|
||||
// 复制package.json/README.md到dist目录
|
||||
fs.copyFileSync('README.md', path.join('dist', 'README.md'))
|
||||
|
||||
const root = path.resolve('./')
|
||||
const content = await fs.promises.readFile(path.resolve(root, 'package.json'), 'utf8')
|
||||
const packageJson = JSON.parse(content)
|
||||
delete packageJson.exports
|
||||
delete packageJson.private
|
||||
await fs.promises.writeFile(path.resolve(root, 'dist/package.json'), JSON.stringify(packageJson, null, 2))
|
||||
|
|
|
|||
|
|
@ -1,13 +0,0 @@
|
|||
/**
|
||||
* 将 dist 目录 index.css 图片资源路径 ../images/ 改为 images
|
||||
*/
|
||||
|
||||
import fs from 'node:fs'
|
||||
import path from 'node:path'
|
||||
|
||||
const source = 'dist'
|
||||
|
||||
const entryFile = path.join(source, 'index.css')
|
||||
let file = fs.readFileSync(entryFile, 'utf8')
|
||||
file = file.replace(/url\(\.\.\/images\//g, 'url(images/')
|
||||
fs.writeFileSync(entryFile, file, 'utf8')
|
||||
|
|
@ -1,9 +1,9 @@
|
|||
{
|
||||
"name": "@opentiny/vue-theme",
|
||||
"type": "module",
|
||||
"version": "3.18.3",
|
||||
"description": "An enterprise-class UI component library, support both Vue.js 2 and Vue.js 3, as well as PC and mobile.",
|
||||
"author": "OpenTiny Team",
|
||||
"type": "module",
|
||||
"license": "MIT",
|
||||
"homepage": "https://opentiny.design/tiny-vue",
|
||||
"repository": {
|
||||
|
|
@ -31,9 +31,9 @@
|
|||
"scripts": {
|
||||
"clean": "rimraf dist src/aurora-theme src/smb-theme",
|
||||
"build:theme": "gulp build --gulpfile build/gulp-dist.js",
|
||||
"build": "npm run clean && npm run build:theme && node build/replace-img.js",
|
||||
"build": "npm run clean && npm run build:theme",
|
||||
"release": "node build/release.js",
|
||||
"build:fast": "npm run build && npm run release",
|
||||
"release": "node build/release.js && node build/postbuild.js",
|
||||
"build:copy-remote": "npm run build:theme && cp-cli dist ../tiny-vue/node_modules/@opentiny/vue-theme",
|
||||
"publishTgz": "node .cloudbuild/publish-tgzs.js",
|
||||
"postversion": "pnpm build",
|
||||
|
|
|
|||
|
|
@ -1,56 +0,0 @@
|
|||
const fs = require('node:fs')
|
||||
const fg = require('fast-glob')
|
||||
|
||||
const ignoreNames = ['base', 'theme']
|
||||
|
||||
function groupBy(array, fn) {
|
||||
const map = {}
|
||||
array.forEach((item) => {
|
||||
const key = fn(item)
|
||||
const collection = map[key]
|
||||
if (!collection) {
|
||||
map[key] = [item]
|
||||
} else {
|
||||
collection.push(item)
|
||||
}
|
||||
})
|
||||
return map
|
||||
}
|
||||
|
||||
fg(['**/*-theme.js']).then((files) => {
|
||||
const components = files
|
||||
.map((file) => {
|
||||
const arr = file.split('/')
|
||||
const themeFile = arr.slice(-1)[0]
|
||||
const content = fs.readFileSync(file, { encoding: 'utf8' })
|
||||
return {
|
||||
name: arr.slice(-2)[0],
|
||||
theme: themeFile.substring(0, themeFile.indexOf('.')),
|
||||
content
|
||||
}
|
||||
})
|
||||
.filter((item) => !ignoreNames.includes(item.name))
|
||||
|
||||
const themes = groupBy(components, (item) => item.theme)
|
||||
|
||||
Object.entries(themes).forEach(([themeKey, components]) => {
|
||||
// 抓取每一个 xxx-theme.js文件，每个文件都是一个对象体
|
||||
let themeObjs = components.map((component) => {
|
||||
let src = component.content
|
||||
src = src.replace(/export[\s\S]*\{/, '{')
|
||||
src = `(${src})`
|
||||
// eslint-disable-next-line no-eval
|
||||
return eval(src)
|
||||
})
|
||||
|
||||
// 把对象体的所有键值组合为一个对象
|
||||
let contents = 'export const concatTheme = {\n'
|
||||
themeObjs.forEach((obj) => {
|
||||
Object.keys(obj).forEach((token) => {
|
||||
contents += ` '${token}': '${obj[token]}',\n`
|
||||
})
|
||||
})
|
||||
contents += '}\n'
|
||||
fs.writeFileSync(`src/theme/${themeKey}/component.js`, contents)
|
||||
})
|
||||
})
|
||||
|
|
@ -1,600 +0,0 @@
|
|||
/**
|
||||
* Copyright (c) 2022 - present TinyVue Authors.
|
||||
* Copyright (c) 2022 - present Huawei Cloud Computing Technologies Co., Ltd.
|
||||
*
|
||||
* Use of this source code is governed by an MIT-style license.
|
||||
*
|
||||
* THE OPEN SOURCE SOFTWARE IN THIS PRODUCT IS DISTRIBUTED IN THE HOPE THAT IT WILL BE USEFUL,
|
||||
* BUT WITHOUT ANY WARRANTY, WITHOUT EVEN THE IMPLIED WARRANTY OF MERCHANTABILITY OR FITNESS FOR
|
||||
* A PARTICULAR PURPOSE. SEE THE APPLICABLE LICENSES FOR MORE DETAILS.
|
||||
*
|
||||
*/
|
||||
|
||||
/*基础变量定义*/
|
||||
:root {
|
||||
/* 基础色 */
|
||||
--ti-base-color-white: #fff; // 纯白
|
||||
--ti-base-color-transparent: transparent; // 透明色
|
||||
--ti-base-color-transparent-5: #0000000d; // smb 新增
|
||||
--ti-base-color-transparent-8: rgba(0, 0, 0, 0.08); // smb 新增
|
||||
--ti-base-color-transparent-15: rgba(0, 0, 0, 0.15); // smb 新增
|
||||
--ti-base-color-transparent-40: rgba(0, 0, 0, 0.4); // smb 新增
|
||||
--ti-base-color-transparent-50: #c2c2c280; // smb 新增
|
||||
--ti-base-bg-color-loading-transparent-50: rgba(255, 255, 255, 0.5); // smb 新增
|
||||
--ti-base-bg-color-disabled-transparent-5: rgba(0, 0, 0, 0.05); // smb 新增
|
||||
|
||||
// 文本色
|
||||
--ti-base-text-color-1: #f76360; // smb 新增
|
||||
--ti-base-text-color-2: #f2f2f2; // smb 新增
|
||||
--ti-base-font-family: 'Manrop', 'Manrope-Medium'; // smb 新增
|
||||
|
||||
/* 1.1品牌色*/
|
||||
/* 品牌主色*/
|
||||
--ti-base-color-brand: #191919; // 主色蓝
|
||||
--ti-base-color-brand-6: #191919; // smb 新增
|
||||
/* 主色衍生色*/
|
||||
--ti-base-color-brand-9: #dbdbdb; // 品牌色-8
|
||||
--ti-base-color-brand-8: #deecff; // 品牌色-8
|
||||
--ti-base-color-brand-7: #b3d6ff; // 品牌色-7
|
||||
--ti-base-color-brand-5: #c2c2c2; // 品牌色-5
|
||||
--ti-base-color-brand-4: #96adfa; // 品牌色-4
|
||||
--ti-base-color-brand-3: #7693f5; // 品牌色-3
|
||||
--ti-base-color-brand-2: #1476ff; // 品牌色-2
|
||||
--ti-base-color-brand-1: #595959; // 品牌色-1
|
||||
|
||||
/* 1.2 中立色*/
|
||||
/* 公用灰色系，用于文本、图标、线条、背景色*/
|
||||
--ti-base-color-common-9: #181818; // 中立色-9
|
||||
--ti-base-color-common-8: #282b33; // 中立色-8
|
||||
--ti-base-color-common-7: #252b3a; // 中立色-7
|
||||
--ti-base-color-common-6: #dbdbdb; // 中立色-6
|
||||
--ti-base-color-common-5: #f0f0f0; // 中立色-5
|
||||
--ti-base-color-common-4: #dbdbdb; // 中立色-4
|
||||
--ti-base-color-common-3: #c2c2c2; // 中立色-3
|
||||
--ti-base-color-common-2: #808080; // 中立色-2
|
||||
--ti-base-color-common-1: #595959; // 中立色-1
|
||||
--ti-base-color-common: #191919; // smb 新增
|
||||
|
||||
/* 1.3 背景色*/
|
||||
--ti-base-color-bg-9: #b12220; // 背景-9
|
||||
--ti-base-color-bg-8: #c7000b; // 背景-8
|
||||
--ti-base-color-bg-7: #ffffff; // 背景-7
|
||||
--ti-base-color-bg-6: #f5f5f5; // 背景-6
|
||||
--ti-base-color-bg-5: #ffffff; // 背景-5
|
||||
--ti-base-color-bg-4: #595959; // 背景-4
|
||||
--ti-base-color-bg-3: #191919; // 背景-3
|
||||
--ti-base-color-bg-2: #fafafa; // 背景-2
|
||||
--ti-base-color-bg-1: #f0f0f0; // 背景-1
|
||||
--ti-base-color-bg: #f5f5f5; // smb 新增
|
||||
|
||||
/* 1.4 功能色*/
|
||||
--ti-base-color-error-4: #de504e; // 错误-4
|
||||
--ti-base-color-error-3: #f66f6a; // 错误-3
|
||||
--ti-base-color-error-2: #ffbcba; // 错误-2
|
||||
--ti-base-color-error-1: #ffeeed; // 错误-1
|
||||
|
||||
--ti-base-color-success-4: #3ac295; // 成功-4
|
||||
--ti-base-color-success-3: #50d4ab; // 成功-3
|
||||
--ti-base-color-success-2: #acf2dc; // 成功-2
|
||||
--ti-base-color-success-1: #edfff9; // 成功-1
|
||||
|
||||
--ti-base-color-success-bg: #e6f2d5; // smb 新增
|
||||
--ti-base-color-success-border: #e6f2d5; // smb 新增
|
||||
--ti-base-color-success: #5cb300; // smb 新增
|
||||
--ti-base-color-success-text: #5cb300; // smb 新增
|
||||
|
||||
--ti-base-color-error-bg: #fce3e1; // smb 新增
|
||||
--ti-base-color-error-border: #fce3e1; // smb 新增
|
||||
--ti-base-color-error: #f23030; // smb 新增
|
||||
--ti-base-color-error-text: #f23030; // smb 新增
|
||||
|
||||
--ti-base-color-warn-bg: #ffebd1; // smb 新增
|
||||
--ti-base-color-warn-border: #ffebd1; // smb 新增
|
||||
--ti-base-color-warn: #ff8800; // smb 新增
|
||||
--ti-base-color-warn-text: #ff8800; // smb 新增
|
||||
|
||||
--ti-base-color-prompt-bg: #deecff; // smb 新增
|
||||
--ti-base-color-prompt-border: #deecff; // smb 新增
|
||||
--ti-base-color-prompt: #1476ff; // smb 新增
|
||||
--ti-base-color-prompt-text: #1476ff; // smb 新增
|
||||
|
||||
--ti-base-color-warn-5: #e37d29; // 告警-5
|
||||
--ti-base-color-warn-4: #fa9841; // 告警-4
|
||||
--ti-base-color-warn-3: #fac20a; // 告警-3
|
||||
--ti-base-color-warn-2: #ffd0a6; // 告警-2
|
||||
--ti-base-color-warn-1: #ffb700; // 告警-1
|
||||
|
||||
--ti-base-color-prompt-4: var(--ti-base-color-brand-7); // 提示-4
|
||||
--ti-base-color-prompt-3: var(--ti-base-color-brand-6); // 提示-3
|
||||
--ti-base-color-prompt-2: var(--ti-base-color-brand-3); // 提示-2
|
||||
--ti-base-color-prompt-1: #ebf6ff; // 提示-1
|
||||
|
||||
--ti-base-color-error-icon-from: #ff41a1; // smb 新增
|
||||
--ti-base-color-error-icon-to: #ff8a5b; // smb 新增
|
||||
--ti-base-color-warn-icon-from: #ff5541; // smb 新增
|
||||
--ti-base-color-warn-icon-to: #ffd347; // smb 新增
|
||||
|
||||
--ti-base-color-prompt-icon-from: #7769e8; // 渐变图标-提示-起始色*/
|
||||
--ti-base-color-prompt-icon-to: #58bbff; // 渐变图标-提示-终止色*/
|
||||
/* 状态图标色*/
|
||||
--ti-base-color-icon-info: #1476ff; // 状态图标-常规
|
||||
|
||||
/* 1.5 图表色*/
|
||||
--ti-base-color-data-3: #6e51e0; // 图表数据色-3
|
||||
--ti-base-color-data-4: #5cb300; // 图表数据色-4
|
||||
--ti-base-color-data-5: #fcbe1e; // 图表数据色-5
|
||||
|
||||
--ti-base-color-data-2: #0bb8b2; // smb 新增
|
||||
--ti-base-color-data-6: #33bcf2; // smb 新增
|
||||
--ti-base-color-data-7: #ba53e6; // smb 新增
|
||||
--ti-base-color-data-8: #eb4696; // smb 新增
|
||||
|
||||
/* 2.公共色：此处颜色为组件场景色，根据使用场景分为以下几大类，具体组件引用以下颜色，如在使用过程中有问题，请自行按类别添加*/
|
||||
|
||||
/**
|
||||
* 2.1 基础色
|
||||
**/
|
||||
--ti-common-color-transparent: var(--ti-base-color-transparent);
|
||||
--ti-common-color-light: var(--ti-base-color-bg-5);
|
||||
--ti-common-color-dark: #000;
|
||||
|
||||
/**
|
||||
* 2.2 提示类型颜色
|
||||
* 用于 alert组件、Modal（message）组件、Tag 标签组件、Notify 通知组件涉及功能提示的背景、文字、图标等的颜色使用
|
||||
**/
|
||||
--ti-common-color-success: var(--ti-base-color-success); // 成功-图标色/状态图标-成功
|
||||
--ti-common-color-text-success: var(--ti-base-color-success-text); // 成功-文字色
|
||||
--ti-common-color-success-bg: var(--ti-base-color-success-bg); // 成功-背景色
|
||||
--ti-common-color-success-border: var(--ti-base-color-success-border); // 成功-边框色
|
||||
|
||||
--ti-common-color-error: var(--ti-base-color-error); // 错误-图标色/状态图标-危险、错误、失败/深色Tip中的价格文本
|
||||
--ti-common-color-error-text: var(--ti-base-color-error-text); // 错误-文字色
|
||||
--ti-common-color-error-bg: var(--ti-base-color-error-bg); // 错误-背景色/校验背景色
|
||||
--ti-common-color-error-border: var(--ti-base-color-error); // 错误-校验边框色
|
||||
--ti-common-color-error-border-secondary: var(--ti-base-color-error-border); // 错误-alert边框色
|
||||
|
||||
--ti-common-color-info: var(--ti-base-color-common-7); // 信息-图标色/状态图标-信息
|
||||
--ti-common-color-info-text: var(--ti-base-color-common-7); // 信息-文字色
|
||||
--ti-common-color-info-bg: rgba(51, 51, 51, 0.06); // 信息-背景色
|
||||
--ti-common-color-info-border: #d3d4d6; // 信息-边框色
|
||||
|
||||
--ti-common-color-warn: var(--ti-base-color-warn); // 告警-图标色/状态图标-警告
|
||||
--ti-common-color-warn-text: var(--ti-base-color-warn-text); // 告警-文字色
|
||||
--ti-common-color-warn-bg: var(--ti-base-color-warn-bg); // 告警-背景色
|
||||
--ti-common-color-warn-border: var(--ti-base-color-warn-border); // 告警-边框色
|
||||
--ti-common-color-warn-secondary: var(--ti-base-color-warn-1); // 次要告警-图标色/状态图标-异常
|
||||
|
||||
--ti-common-color-prompt: var(--ti-base-color-prompt); // 提示-图标色
|
||||
--ti-common-color-prompt-text: var(--ti-base-color-prompt-text); // 提示-图标色
|
||||
--ti-common-color-prompt-bg: var(--ti-base-color-prompt-bg); // 提示-背景色
|
||||
--ti-common-color-prompt-border: var(--ti-base-color-prompt-border); // 提示-边框色
|
||||
--ti-common-color-prompt-icon-from: var(--ti-base-color-prompt-icon-from); // 渐变图标-提示-起始色
|
||||
--ti-common-color-prompt-icon-to: var(--ti-base-color-prompt-icon-to); // 渐变图标-提示-终止色
|
||||
|
||||
--ti-common-color-error-icon-from: var(--ti-base-color-error-icon-from); // smb 新增
|
||||
--ti-common-color-error-icon-to: var(--ti-base-color-error-icon-to); // smb 新增
|
||||
--ti-common-color-warn-icon-from: var(--ti-base-color-warn-icon-from); // smb 新增
|
||||
--ti-common-color-warn-icon-to: var(--ti-base-color-warn-icon-to); // smb 新增
|
||||
/**
|
||||
* 2.3 交互类型颜色
|
||||
* 用于涉及 primary / success / warning / danger / info 类型区分，拥有状态或交互的组件（没有边框）
|
||||
* 例如：Button组件、Badge 标记、Link 文字链接，需要标识一些交互的状态颜色：hover、active、disabled
|
||||
**/
|
||||
--ti-common-color-primary-normal: var(--ti-base-color-brand); // NewCssVar
|
||||
--ti-common-color-primary-hover: var(--ti-base-color-brand-1); // NewCssVar
|
||||
--ti-common-color-primary-active: var(--ti-base-color-brand-1); // NewCssVar
|
||||
--ti-common-color-primary-disabled: var(--ti-base-color-bg-1); // NewCssVar
|
||||
--ti-common-color-primary-disabled-bgcolor: var(--ti-common-color-bg-disabled); // NewCssVar
|
||||
--ti-common-color-primary-disabled-border: var(--ti-base-color-bg-1); // NewCssVar
|
||||
--ti-common-color-primary-disabled-text: var(--ti-base-color-common-3); // NewCssVar
|
||||
--ti-common-color-primary-plain-disabled-bg-color: rgba(191, 191, 191, 0.1); // NewCssVar
|
||||
|
||||
--ti-common-color-success-normal: var(--ti-base-color-success); // NewCssVar
|
||||
--ti-common-color-success-hover: #b9e683; // NewCssVar
|
||||
--ti-common-color-success-active: #b9e683; // NewCssVar
|
||||
--ti-common-color-success-disabled: var(--ti-base-color-bg-1); // NewCssVar
|
||||
--ti-common-color-success-disabled-bgcolor: var(--ti-common-color-bg-disabled); // NewCssVar
|
||||
--ti-common-color-success-disabled-border: var(--ti-base-color-bg-1); // NewCssVar
|
||||
--ti-common-color-success-disabled-text: var(--ti-base-color-common-3); // NewCssVar
|
||||
--ti-common-color-success-plain-disabled-bg-color: rgba(166, 195, 185, 0.1); // NewCssVar
|
||||
|
||||
--ti-common-color-warning-normal: var(--ti-base-color-warn); // NewCssVar
|
||||
--ti-common-color-warning-hover: #fcc98b; // NewCssVar
|
||||
--ti-common-color-warning-active: #fcc98b; // NewCssVar
|
||||
--ti-common-color-warning-disabled: var(--ti-base-color-bg-1); // NewCssVar
|
||||
--ti-common-color-warning-disabled-bgcolor: var(--ti-common-color-bg-disabled); // NewCssVar
|
||||
--ti-common-color-warning-disabled-border: var(--ti-base-color-bg-1); // NewCssVar
|
||||
--ti-common-color-warning-disabled-text: var(--ti-base-color-common-3); // NewCssVar
|
||||
--ti-common-color-warning-plain-disabled-bg-color: rgba(211, 198, 162, 0.1); // NewCssVar
|
||||
|
||||
--ti-common-color-danger-normal: var(--ti-base-color-error); // NewCssVar
|
||||
--ti-common-color-danger-hover: #faa9a5; // NewCssVar
|
||||
--ti-common-color-danger-active: #faa9a5; // NewCssVar
|
||||
--ti-common-color-danger-disabled: var(--ti-base-color-bg-1); // NewCssVar
|
||||
--ti-common-color-danger-disabled-bgcolor: var(--ti-common-color-bg-disabled); // NewCssVar
|
||||
--ti-common-color-danger-disabled-border: var(--ti-base-color-bg-1); // NewCssVar
|
||||
--ti-common-color-danger-disabled-text: var(--ti-base-color-common-3); // NewCssVar
|
||||
--ti-common-color-danger-plain-disabled-bg-color: rgba(216, 186, 181, 0.1); // NewCssVar
|
||||
|
||||
--ti-common-color-info-normal: var(--ti-base-color-common); // NewCssVar
|
||||
--ti-common-color-info-hover: var(--ti-base-color-common-1); // NewCssVar
|
||||
--ti-common-color-info-active: var(--ti-base-color-common-1); // NewCssVar
|
||||
--ti-common-color-info-disabled: var(--ti-base-color-bg-1); // NewCssVar
|
||||
--ti-common-color-info-disabled-bgcolor: var(--ti-common-color-bg-disabled); // NewCssVar
|
||||
--ti-common-color-info-disabled-border: var(--ti-base-color-bg-1); // NewCssVar
|
||||
--ti-common-color-info-disabled-text: var(--ti-base-color-common-3); // NewCssVar
|
||||
--ti-common-color-info-plain-disabled-bg-color: rgba(191, 191, 191, 0.1); // NewCssVar
|
||||
|
||||
/**
|
||||
* 2.4 文本色
|
||||
**/
|
||||
--ti-common-color-text-primary: var(--ti-base-color-common); // 一级文本色-重要信息/标题颜色/输入类文本颜色
|
||||
--ti-common-color-text-secondary: var(--ti-base-color-common-1); // 二级文本色-次要信息
|
||||
--ti-common-color-text-weaken: var(--ti-base-color-common-2); // 三级文本色-弱化信息/说明文字
|
||||
--ti-common-color-text-disabled: var(--ti-base-color-common-3); // 文本禁用信息
|
||||
--ti-common-color-text-darkbg: var(--ti-base-color-common-3); // 深色背景下文本信息
|
||||
--ti-common-color-text-darkbg-disabled: var(--ti-base-color-common-1); // 深色背景下文本信息禁用色
|
||||
--ti-common-color-text-link: var(--ti-base-color-brand-2); // 链接色
|
||||
--ti-common-color-text-link-hover: var(--ti-base-color-brand-2); // 链接悬浮色
|
||||
--ti-common-color-text-link-darkbg: var(--ti-base-color-brand-4); // 深色背景链接色
|
||||
--ti-common-color-text-link-darkbg-hover: var(--ti-base-color-brand-5); // 深色背景链接悬浮色
|
||||
--ti-common-color-text-highlight: var(--ti-base-color-brand-2); // 文本高亮色
|
||||
--ti-common-color-text-white: var(--ti-base-color-white); // 深色背景或图标上文字色
|
||||
--ti-common-color-text-gray: var(--ti-base-color-common); // 深色背景下的文本色，用于tip
|
||||
--ti-common-color-text-gray-disabled: var(--ti-base-color-brand-3); // 深色背景下的灰色文本禁用色，用于tab页签中
|
||||
--ti-common-color-text-important: var(--ti-base-color-common); // 文本_金额
|
||||
--ti-common-color-placeholder: var(--ti-base-color-common-2); // NewCssVar
|
||||
--ti-common-color-selected-text-color: var(--ti-base-color-brand); // NewCssVar 组件或者组件下拉选中时文字的颜色
|
||||
|
||||
/**
|
||||
* 2.5 图标色
|
||||
**/
|
||||
|
||||
// 浅底背景图标色
|
||||
--ti-common-color-icon: var(--ti-base-color-common);
|
||||
--ti-common-color-icon-normal: var(--ti-base-color-common-2);
|
||||
--ti-common-color-icon-hover: var(--ti-base-color-common);
|
||||
--ti-common-color-icon-active: var(--ti-base-color-common);
|
||||
--ti-common-color-icon-disabled: var(--ti-base-color-common-3); // 图标禁用色/状态图标-禁用、停止
|
||||
--ti-common-color-icon-white: var(--ti-base-color-white);
|
||||
|
||||
// 灰色背景下图标色
|
||||
--ti-common-color-icon-graybg-normal: var(--ti-base-color-common-2);
|
||||
--ti-common-color-icon-graybg-hover: var(--ti-base-color-common);
|
||||
--ti-common-color-icon-graybg-active: var(--ti-base-color-common);
|
||||
--ti-common-color-icon-graybg-disabled: var(--ti-base-color-common-3);
|
||||
|
||||
// 深底背景图标色
|
||||
--ti-common-color-icon-darkbg-normal: var(--ti-base-color-common-3);
|
||||
--ti-common-color-icon-darkbg-hover: var(--ti-base-color-brand-3);
|
||||
--ti-common-color-icon-darkbg-active: var(--ti-base-color-brand-3);
|
||||
--ti-common-color-icon-darkbg-disabled: var(--ti-base-color-common-1);
|
||||
|
||||
// 状态图标背景色
|
||||
--ti-common-color-icon-info: var(--ti-base-color-icon-info); // 状态图标-常规、信息提示
|
||||
|
||||
/**
|
||||
* 2.6 背景色
|
||||
**/
|
||||
|
||||
/* 基础背景色 各状态色*/
|
||||
--ti-common-color-bg-normal: var(--ti-base-color-bg); // 通用背景-页面背景色/下拉搜索框背景色/标签背景色
|
||||
--ti-common-color-bg-emphasize: var(--ti-base-color-brand); // 背景高亮色
|
||||
--ti-common-color-bg-disabled: var(--ti-base-color-bg-1); // 禁用背景色
|
||||
--ti-common-color-bg-hover: var(--ti-base-color-brand-1); // 主色背景悬浮色
|
||||
--ti-common-color-bg-gray: var(--ti-base-color-bg-2); // 新区域组件-悬浮背景色
|
||||
--ti-common-color-bg-secondary: var(--ti-base-color-common-3); // 开关组件-关闭状态-背景色
|
||||
|
||||
/* 重要背景色，主要用于重要按钮场景。仅用于NG的button组件 */
|
||||
--ti-common-color-bg-primary: var(--ti-base-color-bg-3); // smb 新增
|
||||
--ti-common-color-bg-primary-hover: var(--ti-base-color-bg-4); // smb 新增
|
||||
--ti-common-color-bg-primary-active: var(--ti-base-color-bg-4); // smb 新增
|
||||
--ti-common-bg-primary: var(--ti-common-color-bg-primary); // 重要按钮背景色
|
||||
--ti-common-bg-primary-hover: var(--ti-common-color-bg-primary-hover); // 重要按钮背景悬浮、focus色
|
||||
--ti-common-bg-primary-active: var(--ti-common-color-bg-primary-active); // 重要按钮背景色按下色
|
||||
|
||||
/* 次要背景色，主要用于次要按钮场景 */
|
||||
--ti-common-color-bg-minor: var(--ti-base-color-bg-7); // smb 新增
|
||||
--ti-common-color-bg-minor-hover: var(--ti-base-color-bg-4); // smb 新增
|
||||
--ti-common-color-bg-minor-active: var(--ti-base-color-bg-4); // smb 新增
|
||||
--ti-common-bg-minor: var(--ti-base-color-bg-2); // 次要按钮背景色
|
||||
--ti-common-bg-minor-hover: var(--ti-base-color-bg-1); // 次要按钮背景悬浮、focus色
|
||||
--ti-common-bg-minor-active: var(--ti-base-color-bg-3); // 次要按钮背景色按下色
|
||||
|
||||
/* 白底背景状态色*/
|
||||
--ti-common-color-bg-white-normal: var(--ti-base-color-bg-7); // 白色背景，用于输入框背景
|
||||
--ti-common-color-bg-white-emphasize: var(
|
||||
--ti-base-color-bg-1
|
||||
); // 白色hover或强调色，如表头背景、表格悬浮、下拉选项悬浮背景
|
||||
|
||||
/* 浅底背景状态色*/
|
||||
--ti-common-color-bg-light-normal: var(
|
||||
--ti-base-color-bg-1
|
||||
); // 滑块slider-背景色/多选快buttongroup-默认背景色/树组件选中背景色
|
||||
--ti-common-color-bg-light-emphasize: var(--ti-base-color-brand-7); // 浅背景hover或强调色，开关组件“开”禁用背景色
|
||||
|
||||
/* 深色底背景状态色*/
|
||||
--ti-common-color-bg-dark-normal: var(--ti-base-color-bg-7); // 一级tab页签背景色
|
||||
--ti-common-color-bg-dark-emphasize: var(--ti-base-color-bg-7); // 一级tab页签背景-悬浮色
|
||||
--ti-common-color-bg-dark-active: var(--ti-base-color-bg-7); // 一级tab页签背景-激活/focus状态背景色
|
||||
--ti-common-color-bg-dark-deep: var(--ti-base-color-white); // tip、alert提示背景色
|
||||
--ti-common-color-bg-dark-disabled: var(--ti-base-color-common-4); // 深色背景禁用色，开关组件“关”禁用背景色
|
||||
|
||||
/* 顶部导航背景色,用于navMenu*/
|
||||
--ti-common-color-bg-navigation: var(--ti-base-color-bg-5); // 顶部导航背景色/顶部导航下拉悬浮背景色
|
||||
--ti-common-color-bg-dark-select: var(--ti-base-color-white); // 顶部导航下拉背景色
|
||||
|
||||
/**
|
||||
* 这里类选择组件都使用这里的状态颜色：Select、Autocomplete、Cascader、DatePicker、DropTimes、Search、TimePicker、Roles
|
||||
* TimeSelect、Amount、Area、Company、Country、Currency、Dept、DropRoles、Hrapprover、User、Calendar
|
||||
**/
|
||||
--ti-common-color-selected-background: var(--ti-base-color-bg); // NewCssVar 组件或者组件下拉选中时的背景色
|
||||
--ti-common-color-hover-background: var(--ti-base-color-bg); // NewCssVar 组件或者组件下拉选项hover时的背景色
|
||||
--ti-common-color-bg-6: var(--ti-base-color-bg-6); // smb 新增
|
||||
|
||||
/**
|
||||
* 2.7 图表色
|
||||
**/
|
||||
--ti-common-color-data-1: var(--ti-base-color-icon-info); // 图表数据色-1
|
||||
--ti-common-color-data-2: var(--ti-base-color-data-2); // 图表数据色-2
|
||||
--ti-common-color-data-3: var(--ti-base-color-data-3); // 图表数据色-3
|
||||
--ti-common-color-data-4: var(--ti-base-color-data-4); // 图表数据色-4
|
||||
--ti-common-color-data-5: var(--ti-base-color-data-5); // 图表数据色-5
|
||||
--ti-common-color-data-6: var(--ti-base-color-data-6); // 图表数据色-6
|
||||
--ti-common-color-data-7: var(--ti-base-color-data-7); // 图表数据色-7
|
||||
--ti-common-color-data-8: var(--ti-base-color-data-8); // 图表数据色-8
|
||||
|
||||
/**
|
||||
* 2.8 行高
|
||||
* TinyNG只有一个1.5倍的行高,其余行高抽出来是为了适配AUI，但是全局都是1.5倍行高可以保持风格统一
|
||||
*/
|
||||
|
||||
--ti-common-line-height-number: 1.5; // 文字行高倍数，建议组件中设置行高使用该变量，如有特殊情况，请自行定义
|
||||
--ti-common-line-height-base: 18px; // NewCssVar 跟字号保持一致
|
||||
--ti-common-line-height-1: 22px; // NewCssVar
|
||||
--ti-common-line-height-2: 24px; // NewCssVar
|
||||
--ti-common-line-height-3: 28px; // NewCssVar
|
||||
--ti-common-line-height-4: 30px; // NewCssVar
|
||||
--ti-common-line-height-5: 36px; // NewCssVar
|
||||
--ti-common-line-height-6: 48px; // NewCssVar
|
||||
--ti-common-line-height-7: 54px; // NewCssVar
|
||||
--ti-common-line-height-8: 60px; // NewCssVar
|
||||
--ti-common-line-height-9: 72px; // NewCssVar
|
||||
--ti-common-line-height-10: 84px; // NewCssVar
|
||||
|
||||
/**
|
||||
* 2.9 间距
|
||||
* 适用于组件中的margin、padding
|
||||
**/
|
||||
|
||||
/* 基础间距 */
|
||||
--ti-common-space-base: 4px;
|
||||
--ti-common-space-2x: calc(var(--ti-common-space-base) * 2); // 间距-2
|
||||
--ti-common-space-3x: calc(var(--ti-common-space-base) * 3); // 间距-3
|
||||
--ti-common-space-4x: calc(var(--ti-common-space-base) * 4); // 间距-4
|
||||
--ti-common-space-5x: calc(var(--ti-common-space-base) * 5); // 间距-5
|
||||
--ti-common-space-6x: calc(var(--ti-common-space-base) * 6); // 间距-6
|
||||
--ti-common-space-8x: calc(var(--ti-common-space-base) * 8); // 间距-7
|
||||
--ti-common-space-10x: calc(var(--ti-common-space-base) * 10); // 间距-8
|
||||
--ti-common-space-2: 2px; // smb 新增
|
||||
|
||||
/* 其他间距 */
|
||||
--ti-common-space-0: 0px; // 其他间距-1
|
||||
--ti-common-space-1: 1px; // 其他间距-2
|
||||
--ti-common-space-6: 6px; // 其他间距-3
|
||||
--ti-common-space-10: 10px; // 其他间距-4
|
||||
--ti-common-dropdown-gap: 4px; // NewCssVar 下拉面板距离上部输入框的间距
|
||||
|
||||
/**
|
||||
* 2.10 阴影
|
||||
**/
|
||||
--ti-common-shadow-none: none; // NewCssVar 无阴影
|
||||
--ti-common-shadow-1-up: 0 -1px 3px 0 rgba(0, 0, 0, 0.08); // 阴影-1 上
|
||||
--ti-common-shadow-1-down: 0 1px 3px 0 rgba(0, 0, 0, 0.08); // 阴影-1 下
|
||||
--ti-common-shadow-1-left: -1px 0px3px 0 rgba(0, 0, 0, 0.08); // 阴影-1 左
|
||||
--ti-common-shadow-1-right: 1px 0px 3px 0 rgba(0, 0, 0, 0.08); // 阴影-1 右
|
||||
--ti-common-shadow-2-up: 0 -2px 12px 0 rgba(0, 0, 0, 0.16); // 阴影-2 上
|
||||
--ti-common-shadow-2-down: 0 2px 12px 0 rgba(0, 0, 0, 0.16); // 阴影-2 下
|
||||
--ti-common-shadow-2-left: -2px 0 12px 0 rgba(0, 0, 0, 0.16); // 阴影-2 左
|
||||
--ti-common-shadow-2-right: 2px 0 12px 0 rgba(0, 0, 0, 0.16); // 阴影-2 右
|
||||
--ti-common-shadow-3-up: 0 -4px 16px 0 rgba(0, 0, 0, 0.08); // 阴影-3 上
|
||||
--ti-common-shadow-3-down: 0 4px 16px 0 rgba(0, 0, 0, 0.08); // 阴影-3 下
|
||||
--ti-common-shadow-3-left: -4px 0 16px 0 rgba(0, 0, 0, 0.08); // 阴影-3 左
|
||||
--ti-common-shadow-3-right: 4px 0 16px 0 rgba(0, 0, 0, 0.08); // 阴影-3 右
|
||||
--ti-common-shadow-4-up: 0 -8px 24px 0 rgba(0, 0, 0, 0.16); // 阴影-4 上
|
||||
--ti-common-shadow-4-down: 0 8px 24px 0 rgba(0, 0, 0, 0.16); // 阴影-4 下
|
||||
--ti-common-shadow-4-left: -8px 0 24px 0 rgba(0, 0, 0, 0.16); // 阴影-4 左
|
||||
--ti-common-shadow-4-right: 8px 0 24px 0 rgba(0, 0, 0, 0.16); // 阴影-4 右
|
||||
|
||||
/* 提示类阴影*/
|
||||
--ti-common-shadow-error: 0 1px 3px 0 rgba(199, 54, 54, 0.25); // 错误
|
||||
--ti-common-shadow-warn: 0 1px 3px 0 rgba(204, 100, 20, 0.25); // 告警
|
||||
--ti-common-shadow-prompt: 0 1px 3px 0 rgba(70, 94, 184, 0.25); // 提示
|
||||
--ti-common-shadow-success: 0 1px 3px 0 rgba(39, 176, 128, 0.25); // 成功
|
||||
|
||||
/**
|
||||
* 2.11 字体
|
||||
**/
|
||||
--ti-common-font-family: 'Helvetica', 'Arial', 'PingFangSC-Regular', 'Hiragino Sans GB', 'Microsoft YaHei', '微软雅黑',
|
||||
'Microsoft JhengHei';
|
||||
|
||||
/**
|
||||
* 2.12 字号
|
||||
**/
|
||||
--ti-common-font-size-base: 14px; // NewCssVar 正文-常规
|
||||
--ti-common-font-size-1: 14px; // NewCssVar 标题-小
|
||||
--ti-common-font-size-2: 16px; // NewCssVar 标题-中
|
||||
--ti-common-font-size-3: 18px; // NewCssVar 标题-大
|
||||
--ti-common-font-size-4: 20px; // NewCssVar 字号-4
|
||||
--ti-common-font-size-5: 24px; // NewCssVar 字号-5
|
||||
--ti-common-font-size-6: 32px; // NewCssVar 字号-6
|
||||
--ti-common-font-size-7: 36px; // NewCssVar 字号-7
|
||||
--ti-common-font-size-0: 12px; // smb 新增
|
||||
--ti-common-font-size-8: 40px; // smb 新增
|
||||
--ti-common-font-size-9: 48px; // smb 新增
|
||||
--ti-common-font-size-10: 56px; // smb 新增
|
||||
--ti-common-line-number: 1.5; // smb 新增
|
||||
|
||||
/**
|
||||
* 2.13 字重
|
||||
**/
|
||||
--ti-common-font-weight-1: 100; // 极细
|
||||
--ti-common-font-weight-2: 200; // 纤细
|
||||
--ti-common-font-weight-3: 300; // 细体
|
||||
--ti-common-font-weight-4: normal; // 常规
|
||||
--ti-common-font-weight-5: 500; // 中等
|
||||
--ti-common-font-weight-6: 600; // 半粗
|
||||
--ti-common-font-weight-7: bold; // 粗体
|
||||
--ti-common-font-weight-8: 800; // 中黑
|
||||
--ti-common-font-weight-9: 900; // 黑体
|
||||
--ti-common-font-weight-bold: 600; // smb
|
||||
--ti-common-font-weight-light: 100; // smb
|
||||
--ti-common-font-weight-normal: 400; // smb
|
||||
|
||||
/**
|
||||
* 2.14 线颜色
|
||||
* 用于边框，分割线等的颜色使用
|
||||
**/
|
||||
--ti-common-color-line-normal: var(--ti-base-color-common-3);
|
||||
--ti-common-color-line-hover: var(--ti-base-color-common);
|
||||
--ti-common-color-line-active: var(--ti-base-color-common);
|
||||
--ti-common-color-line-disabled: var(--ti-base-color-common-4);
|
||||
--ti-common-color-line-dividing: var(--ti-base-color-common-5); //分割线颜色
|
||||
/* 虚线 */
|
||||
--ti-common-color-dash-line-normal: var(--ti-base-color-common);
|
||||
--ti-common-color-dash-line-hover: var(--ti-base-color-common);
|
||||
--ti-common-color-border: #999999; // NewCssVar 待整改后删除
|
||||
--ti-common-color-border-hover: var(--ti-base-color-brand); // NewCssVar 待整改后删除
|
||||
|
||||
/**
|
||||
* 2.15 线粗细
|
||||
**/
|
||||
--ti-common-border-weight-normal: 1px; // 常规
|
||||
--ti-common-border-weight-1: 2px; // 较粗
|
||||
--ti-common-border-weight-2: 3px; // 粗
|
||||
|
||||
/**
|
||||
* 2.16 线样式
|
||||
**/
|
||||
--ti-common-border-style-dashed: dashed; // 虚线
|
||||
--ti-common-border-style-dotted: dotted; // 点线
|
||||
--ti-common-border-style-solid: solid; // 实线
|
||||
|
||||
/**
|
||||
* 2.17 圆角
|
||||
**/
|
||||
--ti-common-border-radius-normal: var(--ti-common-border-radius-3); // 常规
|
||||
--ti-common-border-radius-0: 0; // 直角
|
||||
--ti-common-border-radius-1: 2px; // 圆角-1
|
||||
--ti-common-border-radius-2: 4px; // 圆角-2
|
||||
--ti-common-border-radius-3: 6px; // 圆形
|
||||
--ti-common-border-radius-4: 8px; // smb
|
||||
--ti-common-border-radius-5: 12px; // smb
|
||||
--ti-common-border-radius-6: 16px; // smb
|
||||
--ti-common-border-radius-7: 24px; // smb
|
||||
--ti-common-border-radius-8: 32px; // smb
|
||||
--ti-common-border-radius-9: 48px; // smb
|
||||
--ti-common-border-radius-10: 100px; // smb
|
||||
|
||||
/**
|
||||
* 2.18 尺寸
|
||||
**/
|
||||
--ti-common-size-base: 4px; // 基础尺寸
|
||||
--ti-common-size-2x: calc(var(--ti-common-size-base) * 2); // 尺寸-2
|
||||
--ti-common-size-3x: calc(var(--ti-common-size-base) * 3); // 尺寸-3
|
||||
--ti-common-size-4x: calc(var(--ti-common-size-base) * 4); // 尺寸-4
|
||||
--ti-common-size-5x: calc(var(--ti-common-size-base) * 5); // 尺寸-5
|
||||
--ti-common-size-6x: calc(var(--ti-common-size-base) * 6); // 尺寸-6
|
||||
--ti-common-size-7x: calc(var(--ti-common-size-base) * 7); // 尺寸-7
|
||||
--ti-common-size-8x: calc(var(--ti-common-size-base) * 8); // 尺寸-8
|
||||
--ti-common-size-9x: calc(var(--ti-common-size-base) * 9); // 尺寸-9
|
||||
--ti-common-size-10x: calc(var(--ti-common-size-base) * 10); // 尺寸-10
|
||||
--ti-common-size-11x: calc(var(--ti-common-size-base) * 11); // 尺寸-11
|
||||
--ti-common-size-12x: calc(var(--ti-common-size-base) * 12); // 尺寸-12
|
||||
--ti-common-size-13x: calc(var(--ti-common-size-base) * 13); // 尺寸-13
|
||||
--ti-common-size-14x: calc(var(--ti-common-size-base) * 14); // 尺寸-14
|
||||
--ti-common-size-15x: calc(var(--ti-common-size-base) * 15); // 尺寸-15
|
||||
--ti-common-size-16x: calc(var(--ti-common-size-base) * 16); // 尺寸-16
|
||||
--ti-common-size-17x: calc(var(--ti-common-size-base) * 17); // 尺寸-17
|
||||
--ti-common-size-18x: calc(var(--ti-common-size-base) * 18); // 尺寸-18
|
||||
--ti-common-size-19x: calc(var(--ti-common-size-base) * 19); // 尺寸-19
|
||||
--ti-common-size-20x: calc(var(--ti-common-size-base) * 20); // 尺寸-20
|
||||
--ti-common-size-21x: calc(var(--ti-common-size-base) * 21); // 尺寸-21
|
||||
--ti-common-size-22x: calc(var(--ti-common-size-base) * 22); // 尺寸-22
|
||||
--ti-common-size-23x: calc(var(--ti-common-size-base) * 23); // 尺寸-23
|
||||
--ti-common-size-24x: calc(var(--ti-common-size-base) * 24); // 尺寸-24
|
||||
--ti-common-size-25x: calc(var(--ti-common-size-base) * 25); // 尺寸-25
|
||||
--ti-common-size-26x: calc(var(--ti-common-size-base) * 26); // 尺寸-26
|
||||
--ti-common-size-27x: calc(var(--ti-common-size-base) * 27); // 尺寸-27
|
||||
--ti-common-size-28x: calc(var(--ti-common-size-base) * 28); // 尺寸-28
|
||||
--ti-common-size-29x: calc(var(--ti-common-size-base) * 29); // 尺寸-29
|
||||
--ti-common-size-30x: calc(var(--ti-common-size-base) * 30); // 尺寸-30
|
||||
--ti-common-size-31x: calc(var(--ti-common-size-base) * 31); // 尺寸-31
|
||||
--ti-common-size-32x: calc(var(--ti-common-size-base) * 32); // 尺寸-32
|
||||
--ti-common-size-33x: calc(var(--ti-common-size-base) * 33); // 尺寸-33
|
||||
--ti-common-size-34x: calc(var(--ti-common-size-base) * 34); // 尺寸-34
|
||||
--ti-common-size-35x: calc(var(--ti-common-size-base) * 35); // 尺寸-35
|
||||
--ti-common-size-36x: calc(var(--ti-common-size-base) * 36); // 尺寸-36
|
||||
--ti-common-size-37x: calc(var(--ti-common-size-base) * 37); // 尺寸-37
|
||||
--ti-common-size-38x: calc(var(--ti-common-size-base) * 38); // 尺寸-38
|
||||
--ti-common-size-39x: calc(var(--ti-common-size-base) * 39); // 尺寸-39
|
||||
--ti-common-size-40x: calc(var(--ti-common-size-base) * 40); // 尺寸-40
|
||||
--ti-common-size-41x: calc(var(--ti-common-size-base) * 41); // 尺寸-41
|
||||
--ti-common-size-42x: calc(var(--ti-common-size-base) * 42); // 尺寸-42
|
||||
--ti-common-size-43x: calc(var(--ti-common-size-base) * 43); // 尺寸-43
|
||||
--ti-common-size-44x: calc(var(--ti-common-size-base) * 44); // 尺寸-44
|
||||
--ti-common-size-45x: calc(var(--ti-common-size-base) * 45); // 尺寸-45
|
||||
--ti-common-size-46x: calc(var(--ti-common-size-base) * 46); // 尺寸-46
|
||||
--ti-common-size-47x: calc(var(--ti-common-size-base) * 47); // 尺寸-47
|
||||
--ti-common-size-48x: calc(var(--ti-common-size-base) * 48); // 尺寸-48
|
||||
--ti-common-size-49x: calc(var(--ti-common-size-base) * 49); // 尺寸-49
|
||||
--ti-common-size-50x: calc(var(--ti-common-size-base) * 50); // 尺寸-50
|
||||
|
||||
/* 其他尺寸 */
|
||||
--ti-common-size-0: 0px; // 其他尺寸-1
|
||||
--ti-common-size-auto: auto; // 其他尺寸-2
|
||||
|
||||
/* 以下变量是因为AUI拥有大量的large、medium、normal、minor、samll、mini尺寸， 所以下方是一些抽象尺寸、为了更好的适配AUI (button、tag、alert组件) */
|
||||
--ti-common-size-width-large: 152px; // NewCssVar
|
||||
--ti-common-size-width-medium: 120px; // NewCssVar
|
||||
--ti-common-size-width-normal: 104px; // NewCssVar
|
||||
--ti-common-size-width-small: 80px; // NewCssVar
|
||||
--ti-common-size-width-minor: 30px; // NewCssVar
|
||||
--ti-common-size-width-mini: 24px; // NewCssVar
|
||||
|
||||
--ti-common-size-height-large: 48px; // NewCssVar
|
||||
--ti-common-size-height-medium: 40px; // NewCssVar
|
||||
--ti-common-size-height-small: 24px; // NewCssVar
|
||||
--ti-common-size-height-normal: 32px; // NewCssVar
|
||||
--ti-common-size-height-mini: 24px; // NewCssVar
|
||||
--ti-common-size-height-minor: 30px; // NewCssVar
|
||||
|
||||
/* 滚动条 */
|
||||
--ti-common-scrollbar-width: 8px;
|
||||
--ti-common-scrollbar-height: 8px;
|
||||
--ti-common-scrollbar-track-piece-bg-color: var(--ti-base-color-bg-5);
|
||||
--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);
|
||||
|
||||
// smb 新增
|
||||
--ti-base-box-shadow-1: 0px 2px 12px 0px #00000014;
|
||||
--ti-base-text-decoration-underline: underline; // smb
|
||||
--ti-base-display-block: block; // smb
|
||||
--ti-base-opacity-10: 1; // smb
|
||||
--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);
|
||||
}
|
||||
|
|
@ -11,7 +11,6 @@
|
|||
*/
|
||||
|
||||
@import './reset.less';
|
||||
@import './basic-var.less';
|
||||
@import './vars.less';
|
||||
@import './transition.less';
|
||||
@import '../svg/index.less';
|
||||
|
|
|
|||
|
|
@ -1,500 +0,0 @@
|
|||
/**
|
||||
* Copyright (c) 2022 - present TinyVue Authors.
|
||||
* Copyright (c) 2022 - present Huawei Cloud Computing Technologies Co., Ltd.
|
||||
*
|
||||
* Use of this source code is governed by an MIT-style license.
|
||||
*
|
||||
* THE OPEN SOURCE SOFTWARE IN THIS PRODUCT IS DISTRIBUTED IN THE HOPE THAT IT WILL BE USEFUL,
|
||||
* BUT WITHOUT ANY WARRANTY, WITHOUT EVEN THE IMPLIED WARRANTY OF MERCHANTABILITY OR FITNESS FOR
|
||||
* A PARTICULAR PURPOSE. SEE THE APPLICABLE LICENSES FOR MORE DETAILS.
|
||||
*
|
||||
*/
|
||||
|
||||
/*基础变量定义*/
|
||||
:root {
|
||||
/* 基础色 */
|
||||
--ti-base-color-white: #fff; // 纯白
|
||||
--ti-base-color-transparent: transparent; // 透明色
|
||||
|
||||
/* 1.1品牌色*/
|
||||
/* 品牌主色*/
|
||||
--ti-base-color-brand-6: #5e7ce0; // 主色蓝
|
||||
/* 主色衍生色*/
|
||||
--ti-base-color-brand-8: #344899; // 品牌色-8
|
||||
--ti-base-color-brand-7: #526ecc; // 品牌色-7
|
||||
--ti-base-color-brand-5: #7693f5; // 品牌色-5
|
||||
--ti-base-color-brand-4: #96adfa; // 品牌色-4
|
||||
--ti-base-color-brand-3: #beccfa; // 品牌色-3
|
||||
--ti-base-color-brand-2: #e9edfa; // 品牌色-2
|
||||
--ti-base-color-brand-1: #f2f5fc; // 品牌色-1
|
||||
|
||||
/* 1.2 中立色*/
|
||||
/* 公用灰色系，用于文本、图标、线条、背景色*/
|
||||
--ti-base-color-common-9: #181818; // 中立色-9
|
||||
--ti-base-color-common-8: #282b33; // 中立色-8
|
||||
--ti-base-color-common-7: #252b3a; // 中立色-7
|
||||
--ti-base-color-common-6: #464c59; // 中立色-6
|
||||
--ti-base-color-common-5: #575d6c; // 中立色-5
|
||||
--ti-base-color-common-4: #5c6173; // 中立色-4
|
||||
--ti-base-color-common-3: #8a8e99; // 中立色-3
|
||||
--ti-base-color-common-2: #adb0b8; // 中立色-2
|
||||
--ti-base-color-common-1: #dfe1e6; // 中立色-1
|
||||
|
||||
/* 1.3 背景色*/
|
||||
--ti-base-color-bg-9: #b12220; // 背景-9
|
||||
--ti-base-color-bg-8: #c7000b; // 背景-8
|
||||
--ti-base-color-bg-7: #d64a52; // 背景-7
|
||||
--ti-base-color-bg-6: #eef0f5; // 背景-6
|
||||
--ti-base-color-bg-5: #f5f5f6; // 背景-5
|
||||
--ti-base-color-bg-4: #fafafa; // 背景-4
|
||||
--ti-base-color-bg-3: #ffffff; // 背景-3
|
||||
--ti-base-color-bg-2: #ffffff; // 背景-2
|
||||
--ti-base-color-bg-1: #ffffff; // 背景-1
|
||||
|
||||
/* 1.4 功能色*/
|
||||
--ti-base-color-error-4: #de504e; // 错误-4
|
||||
--ti-base-color-error-3: #f66f6a; // 错误-3
|
||||
--ti-base-color-error-2: #ffbcba; // 错误-2
|
||||
--ti-base-color-error-1: #ffeeed; // 错误-1
|
||||
|
||||
--ti-base-color-success-4: #3ac295; // 成功-4
|
||||
--ti-base-color-success-3: #50d4ab; // 成功-3
|
||||
--ti-base-color-success-2: #acf2dc; // 成功-2
|
||||
--ti-base-color-success-1: #edfff9; // 成功-1
|
||||
|
||||
--ti-base-color-warn-5: #e37d29; // 告警-5
|
||||
--ti-base-color-warn-4: #fa9841; // 告警-4
|
||||
--ti-base-color-warn-3: #fac20a; // 告警-3
|
||||
--ti-base-color-warn-2: #ffd0a6; // 告警-2
|
||||
--ti-base-color-warn-1: #fff3e8; // 告警-1
|
||||
|
||||
--ti-base-color-prompt-4: var(--ti-base-color-brand-7); // 提示-4
|
||||
--ti-base-color-prompt-3: var(--ti-base-color-brand-6); // 提示-3
|
||||
--ti-base-color-prompt-2: var(--ti-base-color-brand-3); // 提示-2
|
||||
--ti-base-color-prompt-1: #ebf6ff; // 提示-1
|
||||
|
||||
--ti-base-color-prompt-icon-from: #7769e8; // 渐变图标-提示-起始色*/
|
||||
--ti-base-color-prompt-icon-to: #58bbff; // 渐变图标-提示-终止色*/
|
||||
/* 状态图标色*/
|
||||
--ti-base-color-icon-info: #6cbfff; // 状态图标-常规
|
||||
|
||||
/* 1.5 图表色*/
|
||||
--ti-base-color-data-3: #a6dd82; // 图表数据色-3
|
||||
--ti-base-color-data-4: #f3689a; // 图表数据色-4
|
||||
--ti-base-color-data-5: #a97af8; // 图表数据色-5
|
||||
|
||||
/* 2.公共色：此处颜色为组件场景色，根据使用场景分为以下几大类，具体组件引用以下颜色，如在使用过程中有问题，请自行按类别添加*/
|
||||
|
||||
/**
|
||||
* 2.1 基础色
|
||||
**/
|
||||
--ti-common-color-transparent: var(--ti-base-color-transparent);
|
||||
--ti-common-color-light: #fff;
|
||||
--ti-common-color-dark: #000;
|
||||
|
||||
/**
|
||||
* 2.2 提示类型颜色
|
||||
* 用于 alert组件、Modal（message）组件、Tag 标签组件、Notify 通知组件涉及功能提示的背景、文字、图标等的颜色使用
|
||||
**/
|
||||
--ti-common-color-success: var(--ti-base-color-success-3); // 成功-图标色/状态图标-成功
|
||||
--ti-common-color-text-success: var(--ti-base-color-success-4); // 成功-文字色
|
||||
--ti-common-color-success-bg: var(--ti-base-color-success-1); // 成功-背景色
|
||||
--ti-common-color-success-border: var(--ti-base-color-success-2); // 成功-边框色
|
||||
|
||||
--ti-common-color-error: var(--ti-base-color-error-3); // 错误-图标色/状态图标-危险、错误、失败/深色Tip中的价格文本
|
||||
--ti-common-color-error-text: var(--ti-base-color-error-4); // 错误-文字色
|
||||
--ti-common-color-error-bg: var(--ti-base-color-error-1); // 错误-背景色/校验背景色
|
||||
--ti-common-color-error-border: var(--ti-base-color-error-3); // 错误-校验边框色
|
||||
--ti-common-color-error-border-secondary: var(--ti-base-color-error-2); // 错误-alert边框色
|
||||
|
||||
--ti-common-color-info: var(--ti-base-color-common-7); // 信息-图标色/状态图标-信息
|
||||
--ti-common-color-info-text: var(--ti-base-color-common-7); // 信息-文字色
|
||||
--ti-common-color-info-bg: rgba(51, 51, 51, 0.06); // 信息-背景色
|
||||
--ti-common-color-info-border: #d3d4d6; // 信息-边框色
|
||||
|
||||
--ti-common-color-warn: var(--ti-base-color-warn-4); // 告警-图标色/状态图标-警告
|
||||
--ti-common-color-warn-text: var(--ti-base-color-warn-5); // 告警-文字色
|
||||
--ti-common-color-warn-bg: var(--ti-base-color-warn-1); // 告警-背景色
|
||||
--ti-common-color-warn-border: var(--ti-base-color-warn-2); // 告警-边框色
|
||||
--ti-common-color-warn-secondary: var(--ti-base-color-warn-3); // 次要告警-图标色/状态图标-异常
|
||||
|
||||
--ti-common-color-prompt: var(--ti-base-color-prompt-3); // 提示-图标色
|
||||
--ti-common-color-prompt-text: var(--ti-base-color-prompt-4); // 提示-图标色
|
||||
--ti-common-color-prompt-bg: var(--ti-base-color-prompt-1); // 提示-背景色
|
||||
--ti-common-color-prompt-border: var(--ti-base-color-prompt-2); // 提示-边框色
|
||||
--ti-common-color-prompt-icon-from: var(--ti-base-color-prompt-icon-from); // 渐变图标-提示-起始色
|
||||
--ti-common-color-prompt-icon-to: var(--ti-base-color-prompt-icon-to); // 渐变图标-提示-终止色
|
||||
|
||||
/**
|
||||
* 2.3 交互类型颜色
|
||||
* 用于涉及 primary / success / warning / danger / info 类型区分，拥有状态或交互的组件（没有边框）
|
||||
* 例如：Button组件、Badge 标记、Link 文字链接，需要标识一些交互的状态颜色：hover、active、disabled
|
||||
**/
|
||||
--ti-common-color-primary-normal: var(--ti-base-color-brand-6); // NewCssVar
|
||||
--ti-common-color-primary-hover: var(--ti-base-color-brand-5); // NewCssVar
|
||||
--ti-common-color-primary-active: var(--ti-base-color-brand-5); // NewCssVar
|
||||
--ti-common-color-primary-disabled: #a0cfff; // NewCssVar
|
||||
--ti-common-color-primary-disabled-bgcolor: var(--ti-common-color-bg-disabled); // NewCssVar
|
||||
--ti-common-color-primary-disabled-border: var(--ti-common-color-line-disabled); // NewCssVar
|
||||
--ti-common-color-primary-disabled-text: var(--ti-common-color-text-disabled); // NewCssVar
|
||||
--ti-common-color-primary-plain-disabled-bg-color: rgba(191, 191, 191, 0.1); // NewCssVar
|
||||
|
||||
--ti-common-color-success-normal: var(--ti-common-color-success); // NewCssVar
|
||||
--ti-common-color-success-hover: var(--ti-common-color-success-border); // NewCssVar
|
||||
--ti-common-color-success-active: var(--ti-common-color-success-border); // NewCssVar
|
||||
--ti-common-color-success-disabled: #a6c3b9; // NewCssVar
|
||||
--ti-common-color-success-disabled-bgcolor: var(--ti-common-color-bg-disabled); // NewCssVar
|
||||
--ti-common-color-success-disabled-border: var(--ti-common-color-line-disabled); // NewCssVar
|
||||
--ti-common-color-success-disabled-text: var(--ti-common-color-text-disabled); // NewCssVar
|
||||
--ti-common-color-success-plain-disabled-bg-color: rgba(166, 195, 185, 0.1); // NewCssVar
|
||||
|
||||
--ti-common-color-warning-normal: var(--ti-common-color-warn); // NewCssVar
|
||||
--ti-common-color-warning-hover: var(--ti-common-color-warn-secondary); // NewCssVar
|
||||
--ti-common-color-warning-active: var(--ti-common-color-warn-secondary); // NewCssVar
|
||||
--ti-common-color-warning-disabled: #d3c6a2; // NewCssVar
|
||||
--ti-common-color-warning-disabled-bgcolor: var(--ti-common-color-bg-disabled); // NewCssVar
|
||||
--ti-common-color-warning-disabled-border: var(--ti-common-color-line-disabled); // NewCssVar
|
||||
--ti-common-color-warning-disabled-text: var(--ti-common-color-text-disabled); // NewCssVar
|
||||
--ti-common-color-warning-plain-disabled-bg-color: rgba(211, 198, 162, 0.1); // NewCssVar
|
||||
|
||||
--ti-common-color-danger-normal: var(--ti-common-bg-primary); // NewCssVar
|
||||
--ti-common-color-danger-hover: var(--ti-common-bg-primary-hover); // NewCssVar
|
||||
--ti-common-color-danger-active: var(--ti-common-bg-primary-active); // NewCssVar
|
||||
--ti-common-color-danger-disabled: #d8bab5; // NewCssVar
|
||||
--ti-common-color-danger-disabled-bgcolor: var(--ti-common-color-bg-disabled); // NewCssVar
|
||||
--ti-common-color-danger-disabled-border: var(--ti-common-color-line-disabled); // NewCssVar
|
||||
--ti-common-color-danger-disabled-text: var(--ti-common-color-text-disabled); // NewCssVar
|
||||
--ti-common-color-danger-plain-disabled-bg-color: rgba(216, 186, 181, 0.1); // NewCssVar
|
||||
|
||||
--ti-common-color-info-normal: var(--ti-base-color-common-7); // NewCssVar
|
||||
--ti-common-color-info-hover: var(--ti-base-color-common-4); // NewCssVar
|
||||
--ti-common-color-info-active: var(--ti-base-color-common-4); // NewCssVar
|
||||
--ti-common-color-info-disabled: #bfbfbf; // NewCssVar
|
||||
--ti-common-color-info-disabled-bgcolor: var(--ti-common-color-bg-disabled); // NewCssVar
|
||||
--ti-common-color-info-disabled-border: var(--ti-common-color-line-disabled); // NewCssVar
|
||||
--ti-common-color-info-disabled-text: var(--ti-common-color-text-disabled); // NewCssVar
|
||||
--ti-common-color-info-plain-disabled-bg-color: rgba(191, 191, 191, 0.1); // NewCssVar
|
||||
|
||||
/**
|
||||
* 2.4 文本色
|
||||
**/
|
||||
--ti-common-color-text-primary: var(--ti-base-color-common-7); // 一级文本色-重要信息/标题颜色/输入类文本颜色
|
||||
--ti-common-color-text-secondary: var(--ti-base-color-common-5); // 二级文本色-次要信息
|
||||
--ti-common-color-text-weaken: var(--ti-base-color-common-3); // 三级文本色-弱化信息/说明文字
|
||||
--ti-common-color-text-disabled: var(--ti-base-color-common-2); // 文本禁用信息
|
||||
--ti-common-color-text-darkbg: var(--ti-base-color-common-2); // 深色背景下文本信息
|
||||
--ti-common-color-text-darkbg-disabled: var(--ti-base-color-common-5); // 深色背景下文本信息禁用色
|
||||
--ti-common-color-text-link: var(--ti-base-color-brand-7); // 链接色
|
||||
--ti-common-color-text-link-hover: var(--ti-base-color-brand-8); // 链接悬浮色
|
||||
--ti-common-color-text-link-darkbg: var(--ti-base-color-brand-4); // 深色背景链接色
|
||||
--ti-common-color-text-link-darkbg-hover: var(--ti-base-color-brand-3); // 深色背景链接悬浮色
|
||||
--ti-common-color-text-highlight: var(--ti-base-color-brand-7); // 文本高亮色
|
||||
--ti-common-color-text-white: var(--ti-base-color-white); // 深色背景或图标上文字色
|
||||
--ti-common-color-text-gray: var(--ti-base-color-white); // 深色背景下的文本色，用于tip
|
||||
--ti-common-color-text-gray-disabled: var(--ti-base-color-common-4); // 深色背景下的灰色文本禁用色，用于tab页签中
|
||||
--ti-common-color-text-important: var(--ti-base-color-error-4); // 文本_金额
|
||||
--ti-common-color-placeholder: var(--ti-base-color-common-2); // NewCssVar
|
||||
--ti-common-color-selected-text-color: var(--ti-common-color-light); // NewCssVar 组件或者组件下拉选中时文字的颜色
|
||||
|
||||
/**
|
||||
* 2.5 图标色
|
||||
**/
|
||||
|
||||
// 浅底背景图标色
|
||||
--ti-common-color-icon-normal: var(--ti-base-color-common-5);
|
||||
--ti-common-color-icon-hover: var(--ti-base-color-brand-6);
|
||||
--ti-common-color-icon-active: var(--ti-base-color-brand-6);
|
||||
--ti-common-color-icon-disabled: var(--ti-base-color-common-2); // 图标禁用色/状态图标-禁用、停止
|
||||
--ti-common-color-icon-white: var(--ti-base-color-white);
|
||||
|
||||
// 灰色背景下图标色
|
||||
--ti-common-color-icon-graybg-normal: var(--ti-base-color-common-2);
|
||||
--ti-common-color-icon-graybg-hover: var(--ti-base-color-brand-6);
|
||||
--ti-common-color-icon-graybg-active: var(--ti-base-color-brand-6);
|
||||
--ti-common-color-icon-graybg-disabled: var(--ti-base-color-common-1);
|
||||
|
||||
// 深底背景图标色
|
||||
--ti-common-color-icon-darkbg-normal: var(--ti-base-color-common-2);
|
||||
--ti-common-color-icon-darkbg-hover: var(--ti-base-color-brand-5);
|
||||
--ti-common-color-icon-darkbg-active: var(--ti-base-color-brand-5);
|
||||
--ti-common-color-icon-darkbg-disabled: var(--ti-base-color-common-5);
|
||||
|
||||
// 状态图标背景色
|
||||
--ti-common-color-icon-info: var(--ti-base-color-icon-info); // 状态图标-常规、信息提示
|
||||
|
||||
/**
|
||||
* 2.6 背景色
|
||||
**/
|
||||
|
||||
/* 基础背景色 各状态色*/
|
||||
--ti-common-color-bg-normal: var(--ti-base-color-bg-6); // 通用背景-页面背景色/下拉搜索框背景色/标签背景色
|
||||
--ti-common-color-bg-emphasize: var(--ti-base-color-brand-6); // 背景高亮色
|
||||
--ti-common-color-bg-disabled: var(--ti-base-color-bg-5); // 禁用背景色
|
||||
--ti-common-color-bg-hover: var(--ti-base-color-brand-8); // 主色背景悬浮色
|
||||
--ti-common-color-bg-gray: var(--ti-base-color-bg-4); // 新区域组件-悬浮背景色
|
||||
--ti-common-color-bg-secondary: var(--ti-base-color-common-2); // 开关组件-关闭状态-背景色
|
||||
|
||||
/* 重要背景色，主要用于重要按钮场景。仅用于NG的button组件*/
|
||||
--ti-common-bg-primary: var(--ti-base-color-bg-8); // 重要按钮背景色
|
||||
--ti-common-bg-primary-hover: var(--ti-base-color-bg-7); // 重要按钮背景悬浮、focus色
|
||||
--ti-common-bg-primary-active: var(--ti-base-color-bg-9); // 重要按钮背景色按下色
|
||||
|
||||
/* 次要背景色，主要用于次要按钮场景*/
|
||||
--ti-common-bg-minor: var(--ti-base-color-bg-2); // 次要按钮背景色
|
||||
--ti-common-bg-minor-hover: var(--ti-base-color-bg-1); // 次要按钮背景悬浮、focus色
|
||||
--ti-common-bg-minor-active: var(--ti-base-color-bg-3); // 次要按钮背景色按下色
|
||||
|
||||
/* 白底背景状态色*/
|
||||
--ti-common-color-bg-white-normal: var(--ti-base-color-white); // 白色背景，用于输入框背景
|
||||
--ti-common-color-bg-white-emphasize: var(
|
||||
--ti-base-color-brand-1
|
||||
); // 白色hover或强调色，如表头背景、表格悬浮、下拉选项悬浮背景
|
||||
|
||||
/* 浅底背景状态色*/
|
||||
--ti-common-color-bg-light-normal: var(
|
||||
--ti-base-color-brand-2
|
||||
); // 滑块slider-背景色/多选快buttongroup-默认背景色/树组件选中背景色
|
||||
--ti-common-color-bg-light-emphasize: var(--ti-base-color-brand-3); // 浅背景hover或强调色，开关组件“开”禁用背景色
|
||||
|
||||
/* 深色底背景状态色*/
|
||||
--ti-common-color-bg-dark-normal: var(--ti-base-color-common-6); // 一级tab页签背景色
|
||||
--ti-common-color-bg-dark-emphasize: var(--ti-base-color-common-4); // 一级tab页签背景-悬浮色
|
||||
--ti-common-color-bg-dark-active: var(--ti-common-color-bg-normal); // 一级tab页签背景-激活/focus状态背景色
|
||||
--ti-common-color-bg-dark-deep: var(--ti-base-color-common-6); // tip、alert提示背景色
|
||||
--ti-common-color-bg-dark-disabled: var(--ti-base-color-common-1); // 深色背景禁用色，开关组件“关”禁用背景色
|
||||
|
||||
/* 顶部导航背景色,用于navMenu*/
|
||||
--ti-common-color-bg-navigation: var(--ti-base-color-common-8); // 顶部导航背景色/顶部导航下拉悬浮背景色
|
||||
--ti-common-color-bg-dark-select: var(--ti-base-color-common-9); // 顶部导航下拉背景色
|
||||
|
||||
/**
|
||||
* 这里类选择组件都使用这里的状态颜色：Select、Autocomplete、Cascader、DatePicker、DropTimes、Search、TimePicker、Roles
|
||||
* TimeSelect、Amount、Area、Company、Country、Currency、Dept、DropRoles、Hrapprover、User、Calendar
|
||||
**/
|
||||
--ti-common-color-selected-background: var(--ti-base-color-brand-6); // NewCssVar 组件或者组件下拉选中时的背景色
|
||||
--ti-common-color-hover-background: var(--ti-base-color-brand-1); // NewCssVar 组件或者组件下拉选项hover时的背景色
|
||||
|
||||
/**
|
||||
* 2.7 图表色
|
||||
**/
|
||||
--ti-common-color-data-1: var(--ti-base-color-success-3); // 图表数据色-1
|
||||
--ti-common-color-data-2: var(--ti-base-color-icon-info); // 图表数据色-2
|
||||
--ti-common-color-data-3: var(--ti-base-color-data-3); // 图表数据色-3
|
||||
--ti-common-color-data-4: var(--ti-base-color-data-4); // 图表数据色-4
|
||||
--ti-common-color-data-5: var(--ti-base-color-data-5); // 图表数据色-5
|
||||
--ti-common-color-data-6: var(--ti-base-color-warn-3); // 图表数据色-6
|
||||
--ti-common-color-data-7: var(--ti-base-color-warn-4); // 图表数据色-7
|
||||
--ti-common-color-data-8: var(--ti-base-color-error-3); // 图表数据色-8
|
||||
|
||||
/**
|
||||
* 2.8 行高
|
||||
* TinyNG只有一个1.5倍的行高,其余行高抽出来是为了适配AUI，但是全局都是1.5倍行高可以保持风格统一
|
||||
*/
|
||||
|
||||
--ti-common-line-height-number: 1.5; // 文字行高倍数，建议组件中设置行高使用该变量，如有特殊情况，请自行定义
|
||||
--ti-common-line-height-base: 12px; // NewCssVar 跟字号保持一致
|
||||
--ti-common-line-height-1: 14px; // NewCssVar
|
||||
--ti-common-line-height-2: 16px; // NewCssVar
|
||||
--ti-common-line-height-3: 18px; // NewCssVar
|
||||
--ti-common-line-height-4: 20px; // NewCssVar
|
||||
--ti-common-line-height-5: 24px; // NewCssVar
|
||||
--ti-common-line-height-6: 32px; // NewCssVar
|
||||
--ti-common-line-height-7: 36px; // NewCssVar
|
||||
|
||||
/**
|
||||
* 2.9 间距
|
||||
* 适用于组件中的margin、padding
|
||||
**/
|
||||
|
||||
/* 基础间距 */
|
||||
--ti-common-space-base: 4px;
|
||||
--ti-common-space-2x: calc(var(--ti-common-space-base) * 2); // 间距-2
|
||||
--ti-common-space-3x: calc(var(--ti-common-space-base) * 3); // 间距-3
|
||||
--ti-common-space-4x: calc(var(--ti-common-space-base) * 4); // 间距-4
|
||||
--ti-common-space-5x: calc(var(--ti-common-space-base) * 5); // 间距-5
|
||||
--ti-common-space-6x: calc(var(--ti-common-space-base) * 6); // 间距-6
|
||||
--ti-common-space-8x: calc(var(--ti-common-space-base) * 8); // 间距-7
|
||||
--ti-common-space-10x: calc(var(--ti-common-space-base) * 10); // 间距-8
|
||||
|
||||
/* 其他间距 */
|
||||
--ti-common-space-0: 0px; // 其他间距-1
|
||||
--ti-common-space-1: 1px; // 其他间距-2
|
||||
--ti-common-space-6: 6px; // 其他间距-3
|
||||
--ti-common-space-10: 10px; // 其他间距-4
|
||||
--ti-common-dropdown-gap: 2px; // NewCssVar 下拉面板距离上部输入框的间距
|
||||
|
||||
/**
|
||||
* 2.10 阴影
|
||||
**/
|
||||
--ti-common-shadow-none: none; // NewCssVar 无阴影
|
||||
--ti-common-shadow-1-up: 0 -1px 4px 0 rgba(0, 0, 0, 0.1); // 阴影-1 上
|
||||
--ti-common-shadow-1-down: 0 1px 4px 0 rgba(0, 0, 0, 0.1); // 阴影-1 下
|
||||
--ti-common-shadow-1-left: -1px 0px 4px 0 rgba(0, 0, 0, 0.1); // 阴影-1 左
|
||||
--ti-common-shadow-1-right: 1px 0px 4px 0 rgba(0, 0, 0, 0.1); // 阴影-1 右
|
||||
--ti-common-shadow-2-up: 0 -2px 8px 0 rgba(0, 0, 0, 0.2); // 阴影-2 上
|
||||
--ti-common-shadow-2-down: 0 2px 8px 0 rgba(0, 0, 0, 0.2); // 阴影-2 下
|
||||
--ti-common-shadow-2-left: -2px 0 8px 0 rgba(238, 10, 10, 0.2); // 阴影-2 左
|
||||
--ti-common-shadow-2-right: 2px 0 8px 0 rgba(252, 5, 5, 0.2); // 阴影-2 右
|
||||
--ti-common-shadow-3-up: 0 -4px 16px 0 rgba(0, 0, 0, 0.2); // 阴影-3 上
|
||||
--ti-common-shadow-3-down: 0 4px 16px 0 rgba(0, 0, 0, 0.2); // 阴影-3 下
|
||||
--ti-common-shadow-3-left: -4px 0 16px 0 rgba(0, 0, 0, 0.2); // 阴影-3 左
|
||||
--ti-common-shadow-3-right: 4px 0 16px 0 rgba(0, 0, 0, 0.2); // 阴影-3 右
|
||||
--ti-common-shadow-4-up: 0 -8px 40px 0 rgba(0, 0, 0, 0.2); // 阴影-4 上
|
||||
--ti-common-shadow-4-down: 0 8px 40px 0 rgba(0, 0, 0, 0.2); // 阴影-4 下
|
||||
--ti-common-shadow-4-left: -8px 0 40px 0 rgba(0, 0, 0, 0.2); // 阴影-4 左
|
||||
--ti-common-shadow-4-right: 8px 0 40px 0 rgba(0, 0, 0, 0.2); // 阴影-4 右
|
||||
|
||||
/* 提示类阴影*/
|
||||
--ti-common-shadow-error: 0 1px 3px 0 rgba(199, 54, 54, 0.25); // 错误
|
||||
--ti-common-shadow-warn: 0 1px 3px 0 rgba(204, 100, 20, 0.25); // 告警
|
||||
--ti-common-shadow-prompt: 0 1px 3px 0 rgba(70, 94, 184, 0.25); // 提示
|
||||
--ti-common-shadow-success: 0 1px 3px 0 rgba(39, 176, 128, 0.25); // 成功
|
||||
|
||||
/**
|
||||
* 2.11 字体
|
||||
**/
|
||||
--ti-common-font-family: 'Helvetica', 'Arial', 'PingFangSC-Regular', 'Hiragino Sans GB', 'Microsoft YaHei', '微软雅黑',
|
||||
'Microsoft JhengHei';
|
||||
|
||||
/**
|
||||
* 2.12 字号
|
||||
**/
|
||||
--ti-common-font-size-base: 12px; // NewCssVar 正文-常规
|
||||
--ti-common-font-size-1: 14px; // NewCssVar 标题-小
|
||||
--ti-common-font-size-2: 16px; // NewCssVar 标题-中
|
||||
--ti-common-font-size-3: 18px; // NewCssVar 标题-大
|
||||
--ti-common-font-size-4: 20px; // NewCssVar 字号-4
|
||||
--ti-common-font-size-5: 24px; // NewCssVar 字号-5
|
||||
--ti-common-font-size-6: 32px; // NewCssVar 字号-6
|
||||
--ti-common-font-size-7: 36px; // NewCssVar 字号-7
|
||||
|
||||
/**
|
||||
* 2.13 字重
|
||||
**/
|
||||
--ti-common-font-weight-1: 100; // 极细
|
||||
--ti-common-font-weight-2: 200; // 纤细
|
||||
--ti-common-font-weight-3: 300; // 细体
|
||||
--ti-common-font-weight-4: normal; // 常规
|
||||
--ti-common-font-weight-5: 500; // 中等
|
||||
--ti-common-font-weight-6: 600; // 半粗
|
||||
--ti-common-font-weight-7: bold; // 粗体
|
||||
--ti-common-font-weight-8: 800; // 中黑
|
||||
--ti-common-font-weight-9: 900; // 黑体
|
||||
--ti-common-font-weight-bold: 700; // NewCssVar
|
||||
|
||||
/**
|
||||
* 2.14 线颜色
|
||||
* 用于边框，分割线等的颜色使用
|
||||
**/
|
||||
--ti-common-color-line-normal: var(--ti-base-color-common-2);
|
||||
--ti-common-color-line-hover: var(--ti-base-color-common-5);
|
||||
--ti-common-color-line-active: var(--ti-base-color-brand-6);
|
||||
--ti-common-color-line-disabled: var(--ti-base-color-common-1);
|
||||
--ti-common-color-line-dividing: var(--ti-base-color-common-1); //分割线颜色
|
||||
/* 虚线 */
|
||||
--ti-common-color-dash-line-normal: var(--ti-base-color-common-5);
|
||||
--ti-common-color-dash-line-hover: var(--ti-base-color-brand-7);
|
||||
--ti-common-color-border: var(--ti-base-color-common-2); // NewCssVar 待整改后删除
|
||||
--ti-common-color-border-hover: var(--ti-base-color-common-5); // NewCssVar 待整改后删除
|
||||
|
||||
/**
|
||||
* 2.15 线粗细
|
||||
**/
|
||||
--ti-common-border-weight-normal: 1px; // 常规
|
||||
--ti-common-border-weight-1: 2px; // 较粗
|
||||
--ti-common-border-weight-2: 3px; // 粗
|
||||
|
||||
/**
|
||||
* 2.16 线样式
|
||||
**/
|
||||
--ti-common-border-style-dashed: dashed; // 虚线
|
||||
--ti-common-border-style-dotted: dotted; // 点线
|
||||
--ti-common-border-style-solid: solid; // 实线
|
||||
|
||||
/**
|
||||
* 2.17 圆角
|
||||
**/
|
||||
--ti-common-border-radius-normal: 2px; // 常规
|
||||
--ti-common-border-radius-0: 0px; // 直角
|
||||
--ti-common-border-radius-1: 4px; // 圆角-1
|
||||
--ti-common-border-radius-2: 8px; // 圆角-2
|
||||
--ti-common-border-radius-3: 50%; // 圆形
|
||||
|
||||
/**
|
||||
* 2.18 尺寸
|
||||
**/
|
||||
--ti-common-size-base: 4px; // 基础尺寸
|
||||
--ti-common-size-2x: calc(var(--ti-common-size-base) * 2); // 尺寸-2
|
||||
--ti-common-size-3x: calc(var(--ti-common-size-base) * 3); // 尺寸-3
|
||||
--ti-common-size-4x: calc(var(--ti-common-size-base) * 4); // 尺寸-4
|
||||
--ti-common-size-5x: calc(var(--ti-common-size-base) * 5); // 尺寸-5
|
||||
--ti-common-size-6x: calc(var(--ti-common-size-base) * 6); // 尺寸-6
|
||||
--ti-common-size-7x: calc(var(--ti-common-size-base) * 7); // 尺寸-7
|
||||
--ti-common-size-8x: calc(var(--ti-common-size-base) * 8); // 尺寸-8
|
||||
--ti-common-size-9x: calc(var(--ti-common-size-base) * 9); // 尺寸-9
|
||||
--ti-common-size-10x: calc(var(--ti-common-size-base) * 10); // 尺寸-10
|
||||
--ti-common-size-11x: calc(var(--ti-common-size-base) * 11); // 尺寸-11
|
||||
--ti-common-size-12x: calc(var(--ti-common-size-base) * 12); // 尺寸-12
|
||||
--ti-common-size-13x: calc(var(--ti-common-size-base) * 13); // 尺寸-13
|
||||
--ti-common-size-14x: calc(var(--ti-common-size-base) * 14); // 尺寸-14
|
||||
--ti-common-size-15x: calc(var(--ti-common-size-base) * 15); // 尺寸-15
|
||||
--ti-common-size-16x: calc(var(--ti-common-size-base) * 16); // 尺寸-16
|
||||
--ti-common-size-17x: calc(var(--ti-common-size-base) * 17); // 尺寸-17
|
||||
--ti-common-size-18x: calc(var(--ti-common-size-base) * 18); // 尺寸-18
|
||||
--ti-common-size-19x: calc(var(--ti-common-size-base) * 19); // 尺寸-19
|
||||
--ti-common-size-20x: calc(var(--ti-common-size-base) * 20); // 尺寸-20
|
||||
--ti-common-size-21x: calc(var(--ti-common-size-base) * 21); // 尺寸-21
|
||||
--ti-common-size-22x: calc(var(--ti-common-size-base) * 22); // 尺寸-22
|
||||
--ti-common-size-23x: calc(var(--ti-common-size-base) * 23); // 尺寸-23
|
||||
--ti-common-size-24x: calc(var(--ti-common-size-base) * 24); // 尺寸-24
|
||||
--ti-common-size-25x: calc(var(--ti-common-size-base) * 25); // 尺寸-25
|
||||
--ti-common-size-26x: calc(var(--ti-common-size-base) * 26); // 尺寸-26
|
||||
--ti-common-size-27x: calc(var(--ti-common-size-base) * 27); // 尺寸-27
|
||||
--ti-common-size-28x: calc(var(--ti-common-size-base) * 28); // 尺寸-28
|
||||
--ti-common-size-29x: calc(var(--ti-common-size-base) * 29); // 尺寸-29
|
||||
--ti-common-size-30x: calc(var(--ti-common-size-base) * 30); // 尺寸-30
|
||||
--ti-common-size-31x: calc(var(--ti-common-size-base) * 31); // 尺寸-31
|
||||
--ti-common-size-32x: calc(var(--ti-common-size-base) * 32); // 尺寸-32
|
||||
--ti-common-size-33x: calc(var(--ti-common-size-base) * 33); // 尺寸-33
|
||||
--ti-common-size-34x: calc(var(--ti-common-size-base) * 34); // 尺寸-34
|
||||
--ti-common-size-35x: calc(var(--ti-common-size-base) * 35); // 尺寸-35
|
||||
--ti-common-size-36x: calc(var(--ti-common-size-base) * 36); // 尺寸-36
|
||||
--ti-common-size-37x: calc(var(--ti-common-size-base) * 37); // 尺寸-37
|
||||
--ti-common-size-38x: calc(var(--ti-common-size-base) * 38); // 尺寸-38
|
||||
--ti-common-size-39x: calc(var(--ti-common-size-base) * 39); // 尺寸-39
|
||||
--ti-common-size-40x: calc(var(--ti-common-size-base) * 40); // 尺寸-40
|
||||
--ti-common-size-41x: calc(var(--ti-common-size-base) * 41); // 尺寸-41
|
||||
--ti-common-size-42x: calc(var(--ti-common-size-base) * 42); // 尺寸-42
|
||||
--ti-common-size-43x: calc(var(--ti-common-size-base) * 43); // 尺寸-43
|
||||
--ti-common-size-44x: calc(var(--ti-common-size-base) * 44); // 尺寸-44
|
||||
--ti-common-size-45x: calc(var(--ti-common-size-base) * 45); // 尺寸-45
|
||||
--ti-common-size-46x: calc(var(--ti-common-size-base) * 46); // 尺寸-46
|
||||
--ti-common-size-47x: calc(var(--ti-common-size-base) * 47); // 尺寸-47
|
||||
--ti-common-size-48x: calc(var(--ti-common-size-base) * 48); // 尺寸-48
|
||||
--ti-common-size-49x: calc(var(--ti-common-size-base) * 49); // 尺寸-49
|
||||
--ti-common-size-50x: calc(var(--ti-common-size-base) * 50); // 尺寸-50
|
||||
|
||||
/* 其他尺寸 */
|
||||
--ti-common-size-0: 0px; // 其他尺寸-1
|
||||
--ti-common-size-auto: auto; // 其他尺寸-2
|
||||
|
||||
/* 以下变量是因为AUI拥有大量的large、medium、normal、minor、samll、mini尺寸， 所以下方是一些抽象尺寸、为了更好的适配AUI (button、tag、alert组件) */
|
||||
--ti-common-size-width-large: var(--ti-common-size-33x); // NewCssVar
|
||||
--ti-common-size-width-medium: var(--ti-common-size-30x); // NewCssVar
|
||||
--ti-common-size-width-normal: var(--ti-common-size-20x); // NewCssVar
|
||||
|
||||
--ti-common-size-height-large: var(--ti-common-size-12x); // NewCssVar
|
||||
--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: var(--ti-common-size-7x); // NewCssVar
|
||||
--ti-common-size-height-mini: var(--ti-common-size-6x); // NewCssVar
|
||||
|
||||
/* 滚动条 */
|
||||
--ti-common-scrollbar-width: 8px;
|
||||
--ti-common-scrollbar-height: 8px;
|
||||
--ti-common-scrollbar-track-piece-bg-color: var(--ti-base-color-bg-4);
|
||||
--ti-common-scrollbar-thumb-bg-color: #bfbfbf;
|
||||
--ti-common-scrollbar-thumb-border-radius: 6px;
|
||||
--ti-common-scrollbar-thumb-hover-bg-color: #999999;
|
||||
--ti-common-scrollbar-thumb-active-bg-color: #999999;
|
||||
}
|
||||
|
|
@ -1,277 +0,0 @@
|
|||
export const tinyBaseOldTheme = {
|
||||
'ti-common-scrollbar-thumb-active-bg-color': '#999999',
|
||||
'ti-common-scrollbar-thumb-hover-bg-color': '#999999',
|
||||
'ti-common-scrollbar-thumb-border-radius': '6px',
|
||||
'ti-common-scrollbar-thumb-bg-color': '#bfbfbf',
|
||||
'ti-common-scrollbar-track-piece-bg-color': 'var(--ti-base-color-bg-4)',
|
||||
'ti-common-scrollbar-height': '8px',
|
||||
'ti-common-scrollbar-width': '8px',
|
||||
'ti-common-size-height-mini': 'var(--ti-common-size-6x)',
|
||||
'ti-common-size-height-normal': 'var(--ti-common-size-7x)',
|
||||
'ti-common-size-height-small': 'var(--ti-common-size-8x)',
|
||||
'ti-common-size-height-medium': 'var(--ti-common-size-10x)',
|
||||
'ti-common-size-height-large': 'var(--ti-common-size-12x)',
|
||||
'ti-common-size-width-normal': 'var(--ti-common-size-20x)',
|
||||
'ti-common-size-width-medium': 'var(--ti-common-size-30x)',
|
||||
'ti-common-size-width-large': 'var(--ti-common-size-33x)',
|
||||
'ti-common-size-auto': 'auto',
|
||||
'ti-common-size-0': '0px',
|
||||
'ti-common-size-50x': 'calc(var(--ti-common-size-base) * 50)',
|
||||
'ti-common-size-49x': 'calc(var(--ti-common-size-base) * 49)',
|
||||
'ti-common-size-48x': 'calc(var(--ti-common-size-base) * 48)',
|
||||
'ti-common-size-47x': 'calc(var(--ti-common-size-base) * 47)',
|
||||
'ti-common-size-46x': 'calc(var(--ti-common-size-base) * 46)',
|
||||
'ti-common-size-45x': 'calc(var(--ti-common-size-base) * 45)',
|
||||
'ti-common-size-44x': 'calc(var(--ti-common-size-base) * 44)',
|
||||
'ti-common-size-43x': 'calc(var(--ti-common-size-base) * 43)',
|
||||
'ti-common-size-42x': 'calc(var(--ti-common-size-base) * 42)',
|
||||
'ti-common-size-41x': 'calc(var(--ti-common-size-base) * 41)',
|
||||
'ti-common-size-40x': 'calc(var(--ti-common-size-base) * 40)',
|
||||
'ti-common-size-39x': 'calc(var(--ti-common-size-base) * 39)',
|
||||
'ti-common-size-38x': 'calc(var(--ti-common-size-base) * 38)',
|
||||
'ti-common-size-37x': 'calc(var(--ti-common-size-base) * 37)',
|
||||
'ti-common-size-36x': 'calc(var(--ti-common-size-base) * 36)',
|
||||
'ti-common-size-35x': 'calc(var(--ti-common-size-base) * 35)',
|
||||
'ti-common-size-34x': 'calc(var(--ti-common-size-base) * 34)',
|
||||
'ti-common-size-33x': 'calc(var(--ti-common-size-base) * 33)',
|
||||
'ti-common-size-32x': 'calc(var(--ti-common-size-base) * 32)',
|
||||
'ti-common-size-31x': 'calc(var(--ti-common-size-base) * 31)',
|
||||
'ti-common-size-30x': 'calc(var(--ti-common-size-base) * 30)',
|
||||
'ti-common-size-29x': 'calc(var(--ti-common-size-base) * 29)',
|
||||
'ti-common-size-28x': 'calc(var(--ti-common-size-base) * 28)',
|
||||
'ti-common-size-27x': 'calc(var(--ti-common-size-base) * 27)',
|
||||
'ti-common-size-26x': 'calc(var(--ti-common-size-base) * 26)',
|
||||
'ti-common-size-25x': 'calc(var(--ti-common-size-base) * 25)',
|
||||
'ti-common-size-24x': 'calc(var(--ti-common-size-base) * 24)',
|
||||
'ti-common-size-23x': 'calc(var(--ti-common-size-base) * 23)',
|
||||
'ti-common-size-22x': 'calc(var(--ti-common-size-base) * 22)',
|
||||
'ti-common-size-21x': 'calc(var(--ti-common-size-base) * 21)',
|
||||
'ti-common-size-20x': 'calc(var(--ti-common-size-base) * 20)',
|
||||
'ti-common-size-19x': 'calc(var(--ti-common-size-base) * 19)',
|
||||
'ti-common-size-18x': 'calc(var(--ti-common-size-base) * 18)',
|
||||
'ti-common-size-17x': 'calc(var(--ti-common-size-base) * 17)',
|
||||
'ti-common-size-16x': 'calc(var(--ti-common-size-base) * 16)',
|
||||
'ti-common-size-15x': 'calc(var(--ti-common-size-base) * 15)',
|
||||
'ti-common-size-14x': 'calc(var(--ti-common-size-base) * 14)',
|
||||
'ti-common-size-13x': 'calc(var(--ti-common-size-base) * 13)',
|
||||
'ti-common-size-12x': 'calc(var(--ti-common-size-base) * 12)',
|
||||
'ti-common-size-11x': 'calc(var(--ti-common-size-base) * 11)',
|
||||
'ti-common-size-10x': 'calc(var(--ti-common-size-base) * 10)',
|
||||
'ti-common-size-9x': 'calc(var(--ti-common-size-base) * 9)',
|
||||
'ti-common-size-8x': 'calc(var(--ti-common-size-base) * 8)',
|
||||
'ti-common-size-7x': 'calc(var(--ti-common-size-base) * 7)',
|
||||
'ti-common-size-6x': 'calc(var(--ti-common-size-base) * 6)',
|
||||
'ti-common-size-5x': 'calc(var(--ti-common-size-base) * 5)',
|
||||
'ti-common-size-4x': 'calc(var(--ti-common-size-base) * 4)',
|
||||
'ti-common-size-3x': 'calc(var(--ti-common-size-base) * 3)',
|
||||
'ti-common-size-2x': 'calc(var(--ti-common-size-base) * 2)',
|
||||
'ti-common-size-base': '4px',
|
||||
'ti-common-border-radius-3': '50%',
|
||||
'ti-common-border-radius-2': '8px',
|
||||
'ti-common-border-radius-1': '4px',
|
||||
'ti-common-border-radius-0': '0px',
|
||||
'ti-common-border-radius-normal': '2px',
|
||||
'ti-common-border-weight-1': '2px',
|
||||
'ti-common-border-weight-normal': '1px',
|
||||
'ti-common-color-border-hover': 'var(--ti-base-color-common-5)',
|
||||
'ti-common-color-border': 'var(--ti-base-color-common-2)',
|
||||
'ti-common-color-dash-line-hover': 'var(--ti-base-color-brand-7)',
|
||||
'ti-common-color-dash-line-normal': 'var(--ti-base-color-common-5)',
|
||||
'ti-common-color-line-dividing': 'var(--ti-base-color-common-1)',
|
||||
'ti-common-color-line-disabled': 'var(--ti-base-color-common-1)',
|
||||
'ti-common-color-line-active': 'var(--ti-base-color-brand-6)',
|
||||
'ti-common-color-line-hover': 'var(--ti-base-color-common-5)',
|
||||
'ti-common-color-line-normal': 'var(--ti-base-color-common-2)',
|
||||
'ti-common-font-weight-bold': '700',
|
||||
'ti-common-font-weight-6': '600',
|
||||
'ti-common-font-weight-4': 'normal',
|
||||
'ti-common-font-size-7': '36px',
|
||||
'ti-common-font-size-6': '32px',
|
||||
'ti-common-font-size-5': '24px',
|
||||
'ti-common-font-size-4': '20px',
|
||||
'ti-common-font-size-3': '18px',
|
||||
'ti-common-font-size-2': '16px',
|
||||
'ti-common-font-size-1': '14px',
|
||||
'ti-common-font-size-base': '12px',
|
||||
'ti-common-font-family':
|
||||
"'Helvetica', 'Arial', 'PingFangSC-Regular', 'Hiragino Sans GB', 'Microsoft YaHei', '微软雅黑',\n 'Microsoft JhengHei'",
|
||||
'ti-common-shadow-4-right': '8px 0 40px 0 rgba(0, 0, 0, 0.2)',
|
||||
'ti-common-shadow-4-left': '-8px 0 40px 0 rgba(0, 0, 0, 0.2)',
|
||||
'ti-common-shadow-4-down': '0 8px 40px 0 rgba(0, 0, 0, 0.2)',
|
||||
'ti-common-shadow-4-up': '0 -8px 40px 0 rgba(0, 0, 0, 0.2)',
|
||||
'ti-common-shadow-3-right': '4px 0 16px 0 rgba(0, 0, 0, 0.2)',
|
||||
'ti-common-shadow-3-left': '-4px 0 16px 0 rgba(0, 0, 0, 0.2)',
|
||||
'ti-common-shadow-3-down': '0 4px 16px 0 rgba(0, 0, 0, 0.2)',
|
||||
'ti-common-shadow-3-up': '0 -4px 16px 0 rgba(0, 0, 0, 0.2)',
|
||||
'ti-common-shadow-2-right': '2px 0 8px 0 rgba(252, 5, 5, 0.2)',
|
||||
'ti-common-shadow-2-left': '-2px 0 8px 0 rgba(238, 10, 10, 0.2)',
|
||||
'ti-common-shadow-2-down': '0 2px 8px 0 rgba(0, 0, 0, 0.2)',
|
||||
'ti-common-shadow-2-up': '0 -2px 8px 0 rgba(0, 0, 0, 0.2)',
|
||||
'ti-common-shadow-1-right': '1px 0px 4px 0 rgba(0, 0, 0, 0.1)',
|
||||
'ti-common-shadow-1-left': '-1px 0px 4px 0 rgba(0, 0, 0, 0.1)',
|
||||
'ti-common-shadow-1-down': '0 1px 4px 0 rgba(0, 0, 0, 0.1)',
|
||||
'ti-common-shadow-1-up': '0 -1px 4px 0 rgba(0, 0, 0, 0.1)',
|
||||
'ti-common-dropdown-gap': '2px',
|
||||
'ti-common-space-10': '10px',
|
||||
'ti-common-space-6': '6px',
|
||||
'ti-common-space-0': '0px',
|
||||
'ti-common-space-10x': 'calc(var(--ti-common-space-base) * 10)',
|
||||
'ti-common-space-8x': 'calc(var(--ti-common-space-base) * 8)',
|
||||
'ti-common-space-6x': 'calc(var(--ti-common-space-base) * 6)',
|
||||
'ti-common-space-5x': 'calc(var(--ti-common-space-base) * 5)',
|
||||
'ti-common-space-4x': 'calc(var(--ti-common-space-base) * 4)',
|
||||
'ti-common-space-3x': 'calc(var(--ti-common-space-base) * 3)',
|
||||
'ti-common-space-2x': 'calc(var(--ti-common-space-base) * 2)',
|
||||
'ti-common-space-base': '4px',
|
||||
'ti-common-line-height-7': '36px',
|
||||
'ti-common-line-height-6': '32px',
|
||||
'ti-common-line-height-5': '24px',
|
||||
'ti-common-line-height-4': '20px',
|
||||
'ti-common-line-height-3': '18px',
|
||||
'ti-common-line-height-2': '16px',
|
||||
'ti-common-line-height-1': '14px',
|
||||
'ti-common-line-height-base': '12px',
|
||||
'ti-common-line-height-number': '1.5',
|
||||
'ti-common-color-data-8': 'var(--ti-base-color-error-3)',
|
||||
'ti-common-color-data-7': 'var(--ti-base-color-warn-4)',
|
||||
'ti-common-color-data-6': 'var(--ti-base-color-warn-3)',
|
||||
'ti-common-color-data-5': 'var(--ti-base-color-data-5)',
|
||||
'ti-common-color-data-4': 'var(--ti-base-color-data-4)',
|
||||
'ti-common-color-data-3': 'var(--ti-base-color-data-3)',
|
||||
'ti-common-color-data-2': 'var(--ti-base-color-icon-info)',
|
||||
'ti-common-color-data-1': 'var(--ti-base-color-success-3)',
|
||||
'ti-common-color-hover-background': 'var(--ti-base-color-brand-1)',
|
||||
'ti-common-color-selected-background': 'var(--ti-base-color-brand-6)',
|
||||
'ti-common-color-bg-dark-select': 'var(--ti-base-color-common-9)',
|
||||
'ti-common-color-bg-navigation': 'var(--ti-base-color-common-8)',
|
||||
'ti-common-color-bg-dark-disabled': 'var(--ti-base-color-common-1)',
|
||||
'ti-common-color-bg-dark-deep': 'var(--ti-base-color-common-6)',
|
||||
'ti-common-color-bg-dark-active': 'var(--ti-common-color-bg-normal)',
|
||||
'ti-common-color-bg-dark-emphasize': 'var(--ti-base-color-common-4)',
|
||||
'ti-common-color-bg-dark-normal': 'var(--ti-base-color-common-6)',
|
||||
'ti-common-color-bg-light-emphasize': 'var(--ti-base-color-brand-3)',
|
||||
'ti-common-color-bg-light-normal': 'var(\n --ti-base-color-brand-2\n )',
|
||||
'ti-common-color-bg-white-emphasize': 'var(\n --ti-base-color-brand-1\n )',
|
||||
'ti-common-color-bg-white-normal': 'var(--ti-base-color-white)',
|
||||
'ti-common-bg-primary-active': 'var(--ti-base-color-bg-9)',
|
||||
'ti-common-bg-primary-hover': 'var(--ti-base-color-bg-7)',
|
||||
'ti-common-bg-primary': 'var(--ti-base-color-bg-8)',
|
||||
'ti-common-color-bg-secondary': 'var(--ti-base-color-common-2)',
|
||||
'ti-common-color-bg-gray': 'var(--ti-base-color-bg-4)',
|
||||
'ti-common-color-bg-hover': 'var(--ti-base-color-brand-8)',
|
||||
'ti-common-color-bg-disabled': 'var(--ti-base-color-bg-5)',
|
||||
'ti-common-color-bg-emphasize': 'var(--ti-base-color-brand-6)',
|
||||
'ti-common-color-bg-normal': 'var(--ti-base-color-bg-6)',
|
||||
'ti-common-color-icon-info': 'var(--ti-base-color-icon-info)',
|
||||
'ti-common-color-icon-darkbg-disabled': 'var(--ti-base-color-common-5)',
|
||||
'ti-common-color-icon-darkbg-active': 'var(--ti-base-color-brand-5)',
|
||||
'ti-common-color-icon-darkbg-hover': 'var(--ti-base-color-brand-5)',
|
||||
'ti-common-color-icon-darkbg-normal': 'var(--ti-base-color-common-2)',
|
||||
'ti-common-color-icon-graybg-disabled': 'var(--ti-base-color-common-1)',
|
||||
'ti-common-color-icon-graybg-active': 'var(--ti-base-color-brand-6)',
|
||||
'ti-common-color-icon-graybg-hover': 'var(--ti-base-color-brand-6)',
|
||||
'ti-common-color-icon-graybg-normal': 'var(--ti-base-color-common-2)',
|
||||
'ti-common-color-icon-white': 'var(--ti-base-color-white)',
|
||||
'ti-common-color-icon-disabled': 'var(--ti-base-color-common-2)',
|
||||
'ti-common-color-icon-active': 'var(--ti-base-color-brand-6)',
|
||||
'ti-common-color-icon-hover': 'var(--ti-base-color-brand-6)',
|
||||
'ti-common-color-icon-normal': 'var(--ti-base-color-common-5)',
|
||||
'ti-common-color-selected-text-color': 'var(--ti-common-color-light)',
|
||||
'ti-common-color-placeholder': 'var(--ti-base-color-common-2)',
|
||||
'ti-common-color-text-important': 'var(--ti-base-color-error-4)',
|
||||
'ti-common-color-text-gray-disabled': 'var(--ti-base-color-common-4)',
|
||||
'ti-common-color-text-gray': 'var(--ti-base-color-white)',
|
||||
'ti-common-color-text-white': 'var(--ti-base-color-white)',
|
||||
'ti-common-color-text-highlight': 'var(--ti-base-color-brand-7)',
|
||||
'ti-common-color-text-link-darkbg-hover': 'var(--ti-base-color-brand-3)',
|
||||
'ti-common-color-text-link-darkbg': 'var(--ti-base-color-brand-4)',
|
||||
'ti-common-color-text-link-hover': 'var(--ti-base-color-brand-8)',
|
||||
'ti-common-color-text-link': 'var(--ti-base-color-brand-7)',
|
||||
'ti-common-color-text-darkbg-disabled': 'var(--ti-base-color-common-5)',
|
||||
'ti-common-color-text-darkbg': 'var(--ti-base-color-common-2)',
|
||||
'ti-common-color-text-disabled': 'var(--ti-base-color-common-2)',
|
||||
'ti-common-color-text-weaken': 'var(--ti-base-color-common-3)',
|
||||
'ti-common-color-text-secondary': 'var(--ti-base-color-common-5)',
|
||||
'ti-common-color-text-primary': 'var(--ti-base-color-common-7)',
|
||||
'ti-common-color-info-disabled-text': 'var(--ti-common-color-text-disabled)',
|
||||
'ti-common-color-info-disabled-border': 'var(--ti-common-color-line-disabled)',
|
||||
'ti-common-color-info-disabled': '#bfbfbf',
|
||||
'ti-common-color-info-active': 'var(--ti-base-color-common-4)',
|
||||
'ti-common-color-info-hover': 'var(--ti-base-color-common-4)',
|
||||
'ti-common-color-info-normal': 'var(--ti-base-color-common-7)',
|
||||
'ti-common-color-danger-disabled-text': 'var(--ti-common-color-text-disabled)',
|
||||
'ti-common-color-danger-disabled-border': 'var(--ti-common-color-line-disabled)',
|
||||
'ti-common-color-danger-disabled': '#d8bab5',
|
||||
'ti-common-color-danger-active': 'var(--ti-common-bg-primary-active)',
|
||||
'ti-common-color-danger-hover': 'var(--ti-common-bg-primary-hover)',
|
||||
'ti-common-color-danger-normal': 'var(--ti-common-bg-primary)',
|
||||
'ti-common-color-warning-disabled-text': 'var(--ti-common-color-text-disabled)',
|
||||
'ti-common-color-warning-disabled-border': 'var(--ti-common-color-line-disabled)',
|
||||
'ti-common-color-warning-disabled': '#d3c6a2',
|
||||
'ti-common-color-warning-active': 'var(--ti-common-color-warn-secondary)',
|
||||
'ti-common-color-warning-hover': 'var(--ti-common-color-warn-secondary)',
|
||||
'ti-common-color-warning-normal': 'var(--ti-common-color-warn)',
|
||||
'ti-common-color-success-disabled-text': 'var(--ti-common-color-text-disabled)',
|
||||
'ti-common-color-success-disabled-border': 'var(--ti-common-color-line-disabled)',
|
||||
'ti-common-color-success-disabled': '#a6c3b9',
|
||||
'ti-common-color-success-active': 'var(--ti-common-color-success-border)',
|
||||
'ti-common-color-success-hover': 'var(--ti-common-color-success-border)',
|
||||
'ti-common-color-success-normal': 'var(--ti-common-color-success)',
|
||||
'ti-common-color-primary-disabled-text': 'var(--ti-common-color-text-disabled)',
|
||||
'ti-common-color-primary-disabled-border': 'var(--ti-common-color-line-disabled)',
|
||||
'ti-common-color-primary-disabled': '#a0cfff',
|
||||
'ti-common-color-primary-active': 'var(--ti-base-color-brand-5)',
|
||||
'ti-common-color-primary-hover': 'var(--ti-base-color-brand-5)',
|
||||
'ti-common-color-primary-normal': 'var(--ti-base-color-brand-6)',
|
||||
'ti-common-color-prompt-icon-to': 'var(--ti-base-color-prompt-icon-to)',
|
||||
'ti-common-color-prompt-icon-from': 'var(--ti-base-color-prompt-icon-from)',
|
||||
'ti-common-color-prompt-border': 'var(--ti-base-color-prompt-2)',
|
||||
'ti-common-color-prompt-bg': 'var(--ti-base-color-prompt-1)',
|
||||
'ti-common-color-prompt-text': 'var(--ti-base-color-prompt-4)',
|
||||
'ti-common-color-prompt': 'var(--ti-base-color-prompt-3)',
|
||||
'ti-common-color-warn-secondary': 'var(--ti-base-color-warn-3)',
|
||||
'ti-common-color-warn-border': 'var(--ti-base-color-warn-2)',
|
||||
'ti-common-color-warn-bg': 'var(--ti-base-color-warn-1)',
|
||||
'ti-common-color-warn-text': 'var(--ti-base-color-warn-5)',
|
||||
'ti-common-color-warn': 'var(--ti-base-color-warn-4)',
|
||||
'ti-common-color-error-border-secondary': 'var(--ti-base-color-error-2)',
|
||||
'ti-common-color-error-border': 'var(--ti-base-color-error-3)',
|
||||
'ti-common-color-error-bg': 'var(--ti-base-color-error-1)',
|
||||
'ti-common-color-error-text': 'var(--ti-base-color-error-4)',
|
||||
'ti-common-color-error': 'var(--ti-base-color-error-3)',
|
||||
'ti-common-color-success-border': 'var(--ti-base-color-success-2)',
|
||||
'ti-common-color-success-bg': 'var(--ti-base-color-success-1)',
|
||||
'ti-common-color-text-success': 'var(--ti-base-color-success-4)',
|
||||
'ti-common-color-success': 'var(--ti-base-color-success-3)',
|
||||
'ti-common-color-dark': '#000',
|
||||
'ti-common-color-light': '#fff',
|
||||
'ti-common-color-transparent': 'var(--ti-base-color-transparent)',
|
||||
'ti-base-color-data-5': '#a97af8',
|
||||
'ti-base-color-data-4': '#f3689a',
|
||||
'ti-base-color-data-3': '#a6dd82',
|
||||
'ti-base-color-icon-info': '#6cbfff',
|
||||
'ti-base-color-prompt-icon-to': '#58bbff',
|
||||
'ti-base-color-prompt-icon-from': '#7769e8',
|
||||
'ti-base-color-warn-1': '#fff3e8',
|
||||
'ti-base-color-bg-1': '#ffffff',
|
||||
'ti-base-color-bg-2': '#ffffff',
|
||||
'ti-base-color-bg-3': '#ffffff',
|
||||
'ti-base-color-bg-4': '#fafafa',
|
||||
'ti-base-color-bg-5': '#f5f5f6',
|
||||
'ti-base-color-bg-6': '#eef0f5',
|
||||
'ti-base-color-bg-7': '#d64a52',
|
||||
'ti-base-color-common-1': '#dfe1e6',
|
||||
'ti-base-color-common-2': '#adb0b8',
|
||||
'ti-base-color-common-3': '#8a8e99',
|
||||
'ti-base-color-common-4': '#5c6173',
|
||||
'ti-base-color-common-5': '#575d6c',
|
||||
'ti-base-color-common-6': '#464c59',
|
||||
'ti-base-color-brand-1': '#f2f5fc',
|
||||
'ti-base-color-brand-2': '#e9edfa',
|
||||
'ti-base-color-brand-3': '#beccfa',
|
||||
'ti-base-color-brand-4': '#96adfa',
|
||||
'ti-base-color-brand-5': '#7693f5',
|
||||
'ti-base-color-brand-7': '#526ecc',
|
||||
'ti-base-color-brand-8': '#344899',
|
||||
'ti-base-color-brand-6': '#5e7ce0'
|
||||
}
|
||||
|
|
@ -0,0 +1,447 @@
|
|||
/* prettier-ignore */
|
||||
:root {
|
||||
/* 1.1品牌色 */
|
||||
|
||||
/* 品牌主色 */
|
||||
--tv-base-color-brand: #191919; // 主色黑/链接颜色
|
||||
|
||||
--tv-base-color-brand-1: #f0f7ff;
|
||||
--tv-base-color-brand-2: #deecff; // 日期选择悬浮背景色 /提示-背景色
|
||||
--tv-base-color-brand-3: #b3d6ff; // 浅背景-悬浮色，开关组件“开”禁用背景色
|
||||
--tv-base-color-brand-4: #7eb7fc;
|
||||
--tv-base-color-brand-5: #4191fa;
|
||||
--tv-base-color-brand-6: #1476ff; // 辅助色， 文字按钮色、文字按钮悬浮色 /单选框选中悬浮/聚焦/激活小圆点填充色和边框色
|
||||
--tv-base-color-brand-7: #0f5ed4;
|
||||
--tv-base-color-brand-8: #0845a6;
|
||||
--tv-base-color-brand-9: #022e7a;
|
||||
--tv-base-color-brand-10: #001a4a;
|
||||
--tv-base-color-brand-11: #3d6899;
|
||||
--tv-base-color-brand-12: #7fa6d4;
|
||||
--tv-base-color-brand-13: #b6d4f2;
|
||||
|
||||
/* 1.2 中立色 */
|
||||
|
||||
/* 公用灰色系，用于文本、图标、线条、背景色 */
|
||||
--tv-base-color-common-1: #ffffff; // 顶部导航背景色、 顶部导航下拉背景色/次要按钮-背景色、次要按钮-hover/Focus/active背景色、输入框背景色
|
||||
--tv-base-color-common-2: #fafafa; // 新区域组件-悬浮背景色
|
||||
--tv-base-color-common-3: #f5f5f5; // 通用背景-页面背景色/ 选块默认色/滑块背景色/分页悬浮色、下拉、列表、悬浮背景、表头背景、下拉菜单、选块选中色
|
||||
--tv-base-color-common-4: #f0f0f0; // 白色背景分割线 /禁用背景/小表格中禁用背景/支付列表中禁用背景、顶部导航下拉悬浮背景色
|
||||
--tv-base-color-common-5: #e6e6e6; // 灰色标签背景色/轮播箭头悬浮色
|
||||
--tv-base-color-common-6: #dbdbdb; // 开关组件“关”禁用背景色/ 禁用描边/ 灰色背景分割线
|
||||
--tv-base-color-common-7: #c2c2c2; // 选块悬浮色/页签禁用文字色/边框色（如下拉、输入框）/文字禁用/禁用图标
|
||||
--tv-base-color-common-8: #808080; // 弱化信息、说明文字
|
||||
--tv-base-color-common-9: #595959; // 次要信息/图标默认/主色悬浮色、链接悬浮色/主要按钮-hover/Focus背景色
|
||||
--tv-base-color-common-10: #333333;
|
||||
--tv-base-color-common-11: #191919; // 正文主色，重要信息、标题颜色、输入类文本颜色、导航栏文字图标/主要按钮-背景色
|
||||
--tv-base-color-common-12: #000000;
|
||||
|
||||
/* 1.4 功能色 */
|
||||
--tv-base-color-success-1: #edf7df;
|
||||
--tv-base-color-success-2: #daf2bb;
|
||||
--tv-base-color-success-3: #b9e683; // 成功-按钮active、hover 颜色
|
||||
--tv-base-color-success-4: #9edb58;
|
||||
--tv-base-color-success-5: #7dcc29;
|
||||
--tv-base-color-success-6: #5cb300; // 成功-背景色/ 图标色/文本色 /进度条当前进度背景色
|
||||
--tv-base-color-success-7: #4b9902;
|
||||
--tv-base-color-success-8: #3c8001;
|
||||
--tv-base-color-success-9: #2e6600;
|
||||
--tv-base-color-success-10: #1f4700;
|
||||
--tv-base-color-success-11: #628c38;
|
||||
--tv-base-color-success-12: #a2c777;
|
||||
--tv-base-color-success-13: #d2e6b8;
|
||||
--tv-base-color-success-14: #e6f2d5; // 成功-背景色/边框色 （这个不在规范色阶中）
|
||||
|
||||
--tv-base-color-error-1: #fff1f0; //
|
||||
--tv-base-color-error-2: #fce2e0; // 错误-边框色 /背景色 /错误校验背景色,设计稿用了这个#FCE3E1，但不在色阶中
|
||||
--tv-base-color-error-3: #faa7a3; // 错误-图标色、校验边框色/、悬浮菜单背景色
|
||||
--tv-base-color-error-4: #fa8682; //
|
||||
--tv-base-color-error-5: #f76360;
|
||||
--tv-base-color-error-6: #f23030; // 错误-文本色/交易金额色 / 紧急告警色
|
||||
--tv-base-color-error-7: #bf0a1c;
|
||||
--tv-base-color-error-8: #a3171c;
|
||||
--tv-base-color-error-9: #78080e;
|
||||
--tv-base-color-error-10: #4d0005;
|
||||
--tv-base-color-error-11: #a64242;
|
||||
--tv-base-color-error-12: #f2c5c2;
|
||||
--tv-base-color-error-13: #fce3e1; // 错误-背景色/错误校验背景色 （这个不在规范色阶中）
|
||||
|
||||
--tv-base-color-warn-1: #fff4e8;
|
||||
--tv-base-color-warn-2: #ffebd1; // 告警-背景色/边框色（浅）
|
||||
--tv-base-color-warn-3: #fcd5a4;
|
||||
--tv-base-color-warn-4: #fcbc72;
|
||||
--tv-base-color-warn-5: #ff9a2e;
|
||||
--tv-base-color-warn-6: #ff8800; // 告警-图标色/深色背景 /重要告警色
|
||||
--tv-base-color-warn-7: #d96900; // 优惠折扣功能色 ti-color-discount
|
||||
--tv-base-color-warn-8: #a64d00;
|
||||
--tv-base-color-warn-9: #733400;
|
||||
--tv-base-color-warn-10: #4d2201;
|
||||
--tv-base-color-warn-11: #9e6d3f;
|
||||
--tv-base-color-warn-12: #d6a981;
|
||||
--tv-base-color-warn-13: #f2d8c2;
|
||||
--tv-base-color-warn-secondary-1: #ffb700; // 次要告警色 黄色系
|
||||
|
||||
--tv-base-color-info-1: #f0f7ff;
|
||||
--tv-base-color-info-2: #deecff; // 提示-背景色 / 边框色
|
||||
--tv-base-color-info-3: #b3d6ff; // 开关组件“开”禁用背景色
|
||||
--tv-base-color-info-4: #7eb7fc;
|
||||
--tv-base-color-info-5: #4191fa;
|
||||
--tv-base-color-info-6: #1476ff; // 提示-图标色 / 文本色
|
||||
--tv-base-color-info-7: #0f5ed4;
|
||||
--tv-base-color-info-8: #0845a6;
|
||||
--tv-base-color-info-9: #022e7a;
|
||||
--tv-base-color-info-10: #001a4a;
|
||||
--tv-base-color-info-11: #3d6899;
|
||||
--tv-base-color-info-12: #7fa6d4;
|
||||
--tv-base-color-info-13: #b6d4f2;
|
||||
|
||||
/** 2. 公共色 **/
|
||||
|
||||
/** 2.2 提示类型组件 ----Alert组件、Modal（message）组件、Tag 标签组件、Notify 通知、错误校验等场景 **/
|
||||
--tv-color-success-text: var(--tv-base-color-success-6); // #5cb300 成功-文本色
|
||||
--tv-color-success-text-primary: var(--tv-base-color-common-11); // #191919 白色背景一级文本色
|
||||
--tv-color-success-text-white: var(--tv-base-color-common-1); // #fff 深彩色背景时为白色文本色
|
||||
--tv-color-success-bg: var(--tv-base-color-success-6); //#5cb300 成功-背景色(深)
|
||||
--tv-color-success-bg-light: var(--tv-base-color-success-14); // #e6f2d5 成功-背景色(浅)
|
||||
--tv-color-success-bg-white: var(--tv-base-color-common-1); // #fff 白色背景色 （tag 是白色还是透明？）
|
||||
--tv-color-success-border: var(--tv-base-color-success-6); // #5cb300 成功-边框色(深)
|
||||
--tv-color-success-border-light: var(--tv-base-color-success-14); // #e6f2d5 成功-边框色（浅）
|
||||
--tv-color-success-icon: var(--tv-base-color-success-6); // #5cb300 成功-图标色
|
||||
|
||||
--tv-color-error-text: var(--tv-base-color-error-6); // #f23030 #f23030 错误-文本色/交易金额色
|
||||
--tv-color-error-text-primary: var(--tv-base-color-common-11); // #191919 白色背景一级文本色
|
||||
--tv-color-error-text-white: var(--tv-base-color-common-1); // #fff 深彩色背景时为白色文本色
|
||||
--tv-color-error-bg: var(--tv-base-color-error-6); // #f23030 #f23030 错误-背景色(深)
|
||||
--tv-color-error-bg-light: var(--tv-base-color-error-13); // #fce3e1 错误-背景色(浅)/错误校验背景色
|
||||
--tv-color-error-bg-white: var(--tv-base-color-common-1); // #fff 白色背景色 （tag 是白色还是透明？）
|
||||
--tv-color-error-border: var(--tv-base-color-error-6); // #f23030 #f23030 错误-边框色(深)
|
||||
--tv-color-error-border-light: var(--tv-base-color-error-13); // #fce3e1 错误-边框色（浅）
|
||||
--tv-color-error-icon: var(--tv-base-color-error-6); // #f23030 #f23030 错误-图标色
|
||||
|
||||
--tv-color-warn-text: var(--tv-base-color-warn-6); // #ff8800 告警-文本色
|
||||
--tv-color-warn-text-primary: var(--tv-base-color-common-11); // #191919 白色背景一级文本色
|
||||
--tv-color-warn-text-white: var(--tv-base-color-common-1); // #fff 深彩色背景时为白色文本色
|
||||
--tv-color-warn-bg: var(--tv-base-color-warn-6); // #ff8800 告警-背景色(深)
|
||||
--tv-color-warn-bg-light: var(--tv-base-color-warn-2); // #ffebd1 告警-背景色(浅)
|
||||
--tv-color-warn-bg-white: var(--tv-base-color-common-1); // #fff 白色背景色 （tag 是白色还是透明？）
|
||||
--tv-color-warn-border: var(--tv-base-color-warn-6); // #ff8800 告警-边框色(深)
|
||||
--tv-color-warn-border-light: var(--tv-base-color-warn-2); // #ffebd1 告警-边框色（浅）
|
||||
--tv-color-warn-icon: var(--tv-base-color-warn-6); // #ff8800 告警-图标色
|
||||
|
||||
--tv-color-info-text: var(--tv-base-color-info-6); // #1476ff 信息-文本色
|
||||
--tv-color-info-text-primary: var(--tv-base-color-common-11); // #191919 白色背景一级文本色
|
||||
--tv-color-info-text-white: var(--tv-base-color-common-1); // #fff 深彩色背景时为白色文本色
|
||||
--tv-color-info-bg: var(--tv-base-color-info-6); // #1476ff 信息-背景色(深)
|
||||
--tv-color-info-bg-light: var(--tv-base-color-info-2); // #deecff 信息-背景色(浅)
|
||||
--tv-color-info-bg-white: var(--tv-base-color-common-1); // #fff 白色背景色 （tag 是白色还是透明？）
|
||||
--tv-color-info-border: var(--tv-base-color-info-6); // #1476ff 信息-边框色(深)
|
||||
--tv-color-info-border-light: var(--tv-base-color-info-2); // #deecff 信息-边框色（浅）
|
||||
--tv-color-info-icon: var(--tv-base-color-info-6); // #1476ff 信息-图标色
|
||||
|
||||
/** 2.3 交互类型颜色---- Button组件、Badge 标记、Link 文字链接 **/
|
||||
|
||||
/* 主要-primary */
|
||||
--tv-color-act-primary-text: var(--tv-base-color-brand); // #191919 主要文本色-1（品牌色）： 朴素/幽灵/纯文本/链接
|
||||
--tv-color-act-primary-text-hover: var(--tv-base-color-brand); // #191919 主要hover文本色-1
|
||||
--tv-color-act-primary-text-active: var(--tv-base-color-brand); // #191919 主要active文本色-1
|
||||
|
||||
--tv-color-act-primary-text-white: var(--tv-base-color-common-1); // #fff 主要文本色-2（白色）
|
||||
--tv-color-act-primary-text-white-hover: var(--tv-base-color-common-1); // #fff 主要hover文本色-2（白色）
|
||||
--tv-color-act-primary-text-white-active: var(--tv-base-color-common-1); // #fff 主要active文本色-2（白色）
|
||||
|
||||
--tv-color-act-primary-bg: var(--tv-base-color-brand); // #191919 主要背景色-1（品牌色）: 默认
|
||||
--tv-color-act-primary-bg-hover: var(--tv-base-color-common-9); // #595959 主要hover背景色-1
|
||||
--tv-color-act-primary-bg-active: var(--tv-base-color-common-9); // #595959 主要active背景色-1
|
||||
|
||||
--tv-color-act-primary-bg-white: var(--tv-base-color-common-1); // #fff 主要背景色-2（白）：朴素
|
||||
--tv-color-act-primary-bg-white-hover: var(--tv-base-color-common-1); // #fff 主要hover背景色-2（白色）： 朴素
|
||||
--tv-color-act-primary-bg-white-active: var(--tv-base-color-common-1); // 主要active背景色-2（白色）： 朴素
|
||||
|
||||
--tv-color-act-primary-border: var(--tv-base-color-brand); // #191919 主要边框色-1 默认
|
||||
--tv-color-act-primary-border-hover: var(--tv-base-color-common-9); // #595959 主要hover边框色-1
|
||||
--tv-color-act-primary-border-active: var(--tv-base-color-common-9); // #595959 主要active边框色-1
|
||||
|
||||
--tv-color-act-primary-border-light: var(--tv-base-color-common-9); // #595959 幽灵/朴素 边框色-2
|
||||
--tv-color-act-primary-border-light-hover: var(--tv-base-color-common-1); // #fff 朴素hover边框色-2.1
|
||||
--tv-color-act-primary-border-light-active: var(--tv-base-color-common-1); // #fff 朴素active边框色-2.1
|
||||
--tv-color-act-primary-border-light-hover-1: var(--tv-base-color-common-7); // #c2c2c2 幽灵hover边框色-2.2
|
||||
--tv-color-act-primary-border-light-active-1: var(--tv-base-color-common-7); // #c2c2c2 幽灵active边框色-2.2
|
||||
|
||||
/* 成功-success */
|
||||
--tv-color-act-success-text: var(--tv-base-color-success-6); // #5cb300 成功文本色-1（成功主色）： 朴素/幽灵/纯文本/链接
|
||||
--tv-color-act-success-text-hover: var(--tv-base-color-success-6); // #5cb300 成功hover文本色-1
|
||||
--tv-color-act-success-text-active: var(--tv-base-color-success-6); // #5cb300 成功active文本色-1
|
||||
|
||||
--tv-color-act-success-text-white: var(--tv-base-color-common-1); // #fff 成功文本色-2（白色）：默认
|
||||
--tv-color-act-success-text-white-hover: var(--tv-base-color-common-1); // #fff 成功hover文本色-2（白色）
|
||||
--tv-color-act-success-text-white-active: var(--tv-base-color-common-1); // #fff 成功active文本色-2（白色）
|
||||
|
||||
--tv-color-act-success-bg: var(--tv-base-color-success-6); // #5cb300 成功背景色-1（品牌色）：默认
|
||||
--tv-color-act-success-bg-hover: var(--tv-base-color-success-5); // #7dcc29 成功hover背景色-1
|
||||
--tv-color-act-success-bg-active: var(--tv-base-color-success-5); // #7dcc29 成功active背景色-1
|
||||
|
||||
--tv-color-act-success-bg-light: var(--tv-base-color-success-1); // #edf7df 成功背景色-1（品牌色）：朴素
|
||||
--tv-color-act-success-bg-light-hover: var(--tv-base-color-success-1); // #edf7df 成功hover背景色-1
|
||||
--tv-color-act-success-bg-light-active: var(--tv-base-color-success-1); // #edf7df 成功active背景色-1
|
||||
|
||||
--tv-color-act-success-border: var(--tv-base-color-success-6); // #5cb300 成功边框色-1：默认 / 幽灵
|
||||
--tv-color-act-success-border-hover: var(--tv-base-color-success-5); // #7dcc29 成功hover边框色-1.1
|
||||
--tv-color-act-success-border-active: var(--tv-base-color-success-5); // #7dcc29 成功active边框色-1.1
|
||||
--tv-color-act-success-border-hover-1: var(--tv-base-color-success-2); // #daf2bb 成功hover边框色-1.2
|
||||
--tv-color-act-success-border-active-1: var(--tv-base-color-success-2); // #daf2bb 成功active边框色-1.2
|
||||
|
||||
--tv-color-act-success-border-light: var(--tv-base-color-success-2); // #daf2bb 成功边框色-2:朴素
|
||||
--tv-color-act-success-border-light-hover: var(--tv-base-color-success-1); // #edf7df 成功hover边框色
|
||||
--tv-color-act-success-border-light-active: var(--tv-base-color-success-1); // #edf7df 成功active边框色
|
||||
|
||||
/* 告警-warning */
|
||||
--tv-color-act-warning-text: var(--tv-base-color-warn-6); // #ff8800 告警文本色-1（告警主色）：朴素/幽灵/纯文本/链接
|
||||
--tv-color-act-warning-text-hover: var(--tv-base-color-warn-6); // #ff8800 告警hover文本色-1
|
||||
--tv-color-act-warning-text-active: var(--tv-base-color-warn-6); // #ff8800 告警active文本色-1
|
||||
|
||||
--tv-color-act-warning-text-white: var(--tv-base-color-common-1); // #fff 告警文本色-2（白色）：默认
|
||||
--tv-color-act-warning-text-white-hover: var(--tv-base-color-common-1); // #fff 告警hover文本色-2（白色）
|
||||
--tv-color-act-warning-text-white-active: var(--tv-base-color-common-1); // #fff 告警active文本色-2（白色）
|
||||
|
||||
--tv-color-act-warning-bg: var(--tv-base-color-warn-6); // #ff8800 告警背景色-1（告警主色）：默认
|
||||
--tv-color-act-warning-bg-hover: var(--tv-base-color-warn-5); //#ff9a2e 告警hover背景色-1
|
||||
--tv-color-act-warning-bg-active: var(--tv-base-color-warn-5); //#ff9a2e 告警active背景色-1
|
||||
|
||||
--tv-color-act-warning-bg-light: var(--tv-base-color-warn-1); // #fff4e8 告警背景色-1（告警主色衍生色）：朴素
|
||||
--tv-color-act-warning-bg-light-hover: var(--tv-base-color-warn-1); // #fff4e8 告警hover背景色-1
|
||||
--tv-color-act-warning-bg-light-active: var(--tv-base-color-warn-1); // #fff4e8 告警active背景色-1
|
||||
|
||||
--tv-color-act-warning-border: var(--tv-base-color-warn-6); // #ff8800 告警边框色-1：默认 / 幽灵
|
||||
--tv-color-act-warning-border-hover: var(--tv-base-color-warn-5); //#ff9a2e 告警hover边框色-1.1
|
||||
--tv-color-act-warning-border-active: var(--tv-base-color-warn-5); //#ff9a2e 告警active边框色-1.1
|
||||
--tv-color-act-warning-border-hover-1: var(--tv-base-color-warn-2); //#ffebd1 告警幽灵hover边框色-1.2
|
||||
--tv-color-act-warning-border-active-1: var(--tv-base-color-warn-2); //#ffebd1 告警幽灵active边框色-1.2
|
||||
|
||||
--tv-color-act-warning-border-light: var(--tv-base-color-warn-2); //#ffebd1 告警边框色-2：朴素
|
||||
--tv-color-act-warning-border-light-hover: var(--tv-base-color-warn-1); // #fff4e8 告警hover边框色
|
||||
--tv-color-act-warning-border-light-active: var(--tv-base-color-warn-1); // #fff4e8 告警active边框色
|
||||
|
||||
/* 危险-danger */
|
||||
--tv-color-act-danger-text: var(--tv-base-color-error-6); // #f23030 危险文本色-1（成功主色）：朴素/幽灵/纯文本/链接
|
||||
--tv-color-act-danger-text-hover: var(--tv-base-color-error-6); // #f23030 #f23030 危险hover文本色-1
|
||||
--tv-color-act-danger-text-active: var(--tv-base-color-error-6); // #f23030 #f23030 危险active文本色-1
|
||||
|
||||
--tv-color-act-danger-text-white: var(--tv-base-color-common-1); // #fff 危险文本色-2（白色）：默认
|
||||
--tv-color-act-danger-text-white-hover: var(--tv-base-color-common-1); // #fff 危险hover文本色-2（白色）
|
||||
--tv-color-act-danger-text-white-active: var(--tv-base-color-common-1); // #fff 危险active文本色-2（白色）
|
||||
|
||||
--tv-color-act-danger-bg: var(--tv-base-color-error-6); // #f23030 #f23030 危险背景色-1（成功主色）：默认
|
||||
--tv-color-act-danger-bg-hover: var(--tv-base-color-error-5); // #f76360 危险hover背景色-1
|
||||
--tv-color-act-danger-bg-active: var(--tv-base-color-error-5); // #f76360 危险active背景色-1
|
||||
|
||||
--tv-color-act-danger-bg-light: var(--tv-base-color-error-1); // #fff1f0 危险背景色-2（成功主色衍生色）：朴素
|
||||
--tv-color-act-danger-bg-light-hover: var(--tv-base-color-error-1); // #fff1f0 危险hover背景色-1
|
||||
--tv-color-act-danger-bg-light-active: var(--tv-base-color-error-1); // #fff1f0 危险active背景色-1
|
||||
|
||||
--tv-color-act-danger-border: var(--tv-base-color-error-6); // #f23030 #f23030 危险边框色-1：默认 / 幽灵
|
||||
--tv-color-act-danger-border-hover: var(--tv-base-color-error-5); // #f76360 危险hover边框色-1.1
|
||||
--tv-color-act-danger-border-active: var(--tv-base-color-error-5); // #f76360 危险active边框色-1.1
|
||||
--tv-color-act-danger-border-hover-1: var(--tv-base-color-error-2); // #fce2e0 危险hover边框色-1.2
|
||||
--tv-color-act-danger-border-active-1: var(--tv-base-color-error-2); // #fce2e0 危险active边框色-1.2
|
||||
|
||||
--tv-color-act-danger-border-light: var(--tv-base-color-error-2); // #fce2e0 危险边框色-2：朴素
|
||||
--tv-color-act-danger-border-light-hover: var(--tv-base-color-error-1); // #fff1f0 危险hover边框色
|
||||
--tv-color-act-danger-border-light-active: var(--tv-base-color-error-1); // #fff1f0 危险active边框色
|
||||
|
||||
/* 信息-info */
|
||||
--tv-color-act-info-text: var(--tv-base-color-info-6); // #1476ff 信息文本色-1（信息主色）：朴素/幽灵/纯文本/链接
|
||||
--tv-color-act-info-text-hover: var(--tv-base-color-info-6); // #1476ff 信息hover文本色-1
|
||||
--tv-color-act-info-text-active: var(--tv-base-color-info-6); // #1476ff 信息active文本色-1
|
||||
|
||||
--tv-color-act-info-text-white: var(--tv-base-color-common-1); // #fff 信息文本色-2（白色）：默认
|
||||
--tv-color-act-info-text-white-hover: var(--tv-base-color-common-1); // #fff 信息hover文本色-2（白色）
|
||||
--tv-color-act-info-text-white-active: var(--tv-base-color-common-1); // #fff 信息active文本色-2（白色）
|
||||
|
||||
--tv-color-act-info-bg: var(--tv-base-color-info-6); // #1476ff 信息背景色-1（信息主色）：默认
|
||||
--tv-color-act-info-bg-hover: var(--tv-base-color-info-5); // #4191fa 信息hover背景色-1
|
||||
--tv-color-act-info-bg-active: var(--tv-base-color-info-5); // #4191fa 信息active背景色-1
|
||||
|
||||
--tv-color-act-info-bg-light: var(--tv-base-color-info-1); // #f0f7ff 信息背景色-1（信息主色衍生色）：朴素
|
||||
--tv-color-act-info-bg-light-hover: var(--tv-base-color-info-1); // #f0f7ff 信息hover背景色-1
|
||||
--tv-color-act-info-bg-light-active: var(--tv-base-color-info-1); // #f0f7ff 信息active背景色-1
|
||||
|
||||
--tv-color-act-info-border: var(--tv-base-color-info-6); // #1476ff 信息边框色-1：默认 / 幽灵
|
||||
--tv-color-act-info-border-hover: var(--tv-base-color-info-5); // #4191fa 信息hover边框色-1.1
|
||||
--tv-color-act-info-border-active: var(--tv-base-color-info-5); // #4191fa 信息active边框色-1.1
|
||||
--tv-color-act-info-border-hover-1: var(--tv-base-color-info-2); // #deecff 信息hover边框色-1.2：幽灵
|
||||
--tv-color-act-info-border-active-1: var(--tv-base-color-info-2); // #deecff 信息active边框色-1.2
|
||||
|
||||
--tv-color-act-info-border-light: var(--tv-base-color-info-2); // #deecff 信息边框色-2：朴素
|
||||
--tv-color-act-info-border-light-hover: var(--tv-base-color-info-1); // #f0f7ff 信息hover边框色
|
||||
--tv-color-act-info-border-light-active: var(--tv-base-color-info-1); // #f0f7ff 信息active边框色
|
||||
|
||||
/** 2.4 文本色 **/
|
||||
--tv-color-text: var(--tv-base-color-common-11); // #191919 一级文本色-正文主色，重要信息、标题颜色、输入类文本颜色、导航栏文字图标
|
||||
--tv-color-text-secondary: var(--tv-base-color-common-9); // #595959 二级文本色-次要信息
|
||||
--tv-color-text-weaken: var(--tv-base-color-common-8); // #808080 三级文本色-弱化信息、说明文字
|
||||
--tv-color-text-placeholder: var(--tv-base-color-common-8); // #808080 占位文本色
|
||||
--tv-color-text-disabled: var(--tv-base-color-common-7); // #c2c2c2 禁用文本色
|
||||
--tv-color-text-active: var(--tv-base-color-brand-6); // #1476ff 选中文本色 / 文本高亮色（搜索关键字高亮）
|
||||
--tv-color-text-important: var(--tv-base-color-common-11); // #191919 重要文本色-文本_金额
|
||||
--tv-color-text-white: var(--tv-base-color-common-1); // #fff 深色背景上-文本色
|
||||
--tv-color-text-link: var(--tv-base-color-brand-6); // #1476ff 链接色（链接按钮）
|
||||
--tv-color-text-link-hover: var(--tv-base-color-brand-6); // #1476ff 链接悬浮色
|
||||
|
||||
/** 2.5 图标色 **/
|
||||
--tv-color-icon: var(--tv-base-color-common-8); // #808080 默认图标色
|
||||
--tv-color-icon-hover: var(--tv-base-color-common-11); // #191919 图标悬浮色
|
||||
--tv-color-icon-active: var(--tv-base-color-common-11); // #191919 图标激活色
|
||||
--tv-color-icon-disabled: var(--tv-base-color-common-7); // #c2c2c2 图标禁用色
|
||||
--tv-color-icon-checked-disabled:var(--tv-base-color-common-6); // #dbdbdb 图标禁用色-1 checkbox选中且禁用
|
||||
--tv-color-icon-control: var(--tv-base-color-brand); // #191919 图标按钮 / 图标+文本按钮图标色,主要在按钮场景（稳定态图标色， hover时不用变化）
|
||||
--tv-color-icon-control-active: var(--tv-base-color-brand-6); // #1476ff 控件图标激活色，主要在checkbox、radio图标激活场景
|
||||
--tv-color-icon-control-disabled: var(--tv-base-color-common-6); // #dbdbdb 控件图标禁用色，主要在checkbox、radio图标激活场景
|
||||
--tv-color-icon-white: var(--tv-base-color-common-1); // #fff 深色背景白色图标
|
||||
--tv-color-icon-link: var(--tv-base-color-brand-6); // #1476ff 链接图标色
|
||||
--tv-color-icon-warn-secondary: var(--tv-base-color-warn-secondary-1); // #ffb700 次要警告图标色 / 评分组件rate-图标色/状态图标-异常
|
||||
|
||||
|
||||
/** 2.6 背景色 **/
|
||||
|
||||
/* 2.6.1 常态 */
|
||||
--tv-color-bg: var(--tv-base-color-common-3); // #f5f5f5 通用背景色 /选块的默认背景颜色、滑块手柄的背景颜色/表格表头/穿梭框头部背景颜色/下拉搜索的背景、折叠面板背景色
|
||||
--tv-color-bg-primary: var(--tv-base-color-brand); // #191919 主要背景色（品牌色）：slider/step/流程图
|
||||
--tv-color-bg-secondary: var(--tv-base-color-common-1); // #fff 次要背景色（白色）：// 输入框背景/默认按钮背景/折叠面板头部背景色/下拉面板背景色
|
||||
--tv-color-bg-control: var(--tv-base-color-common-7); // #c2c2c2 单选/复选/开关/滑块默认背景色
|
||||
--tv-color-bg-control-unactive: var(--tv-base-color-common-7); // #c2c2c2 开关组件-关闭状态-背景色
|
||||
--tv-color-bg-gray-1: var(--tv-base-color-common-2); // #fafafa 灰色背景-1：灰色卡片背景色/表格下展背景色
|
||||
--tv-color-bg-gray-2: var(--tv-base-color-common-5); // #e6e6e6 灰色背景-2灰色标签背景色
|
||||
--tv-color-bg-header: var(--tv-base-color-common-4); // #f0f0f0 表头背景色(如果只有表格使用，就转成组件级变量）
|
||||
--tv-color-bg-mask: rgba(0, 0, 0, 30%); // 遮罩层带有透明度的背景色
|
||||
|
||||
/* 2.6.2 禁用 */
|
||||
--tv-color-bg-disabled: var(--tv-base-color-common-4); // #f0f0f0 禁用背景色
|
||||
--tv-color-bg-disabled-control-checked: var(--tv-base-color-common-6); // #dbdbdb 深色背景禁用色，控件选中状态下的禁用背景色
|
||||
--tv-color-bg-disabled-control-unactive: var(--tv-base-color-common-6); // #dbdbdb 开关组件“关”禁用背景色
|
||||
--tv-color-bg-disabled-control-active: var(--tv-base-color-brand-3); // #b3d6ff 深色背景禁用色，开关组件“开”禁用背景色
|
||||
|
||||
/* 2.6.3 悬浮 */
|
||||
--tv-color-bg-hover: var(--tv-base-color-common-3); // #f5f5f5 浅背景-悬浮色
|
||||
--tv-color-bg-hover-primary: var(--tv-base-color-common-9); // #595959 一级tab页签背景-悬浮色 /分页hover背景颜色 /灰色悬浮背景色：表格悬浮、下拉悬浮、左侧导航悬浮
|
||||
--tv-color-bg-hover-secondary: var(--tv-base-color-common-1); // #fff 次要背景色悬浮色 / 穿梭框头部/折叠面板背景色
|
||||
--tv-color-bg-hover-1: var(--tv-base-color-brand-2); // #deecff 浅蓝色场景：悬浮背景色-日期悬浮 /选块悬浮态背景色
|
||||
--tv-color-bg-hover-2: var(--tv-base-color-common-5); // #e6e6e6 轮播箭头背景悬浮色
|
||||
--tv-color-bg-hover-3: var(--tv-base-color-brand-1); // #f0f7ff 悬浮背景色
|
||||
|
||||
/* 2.6.4 active/选中 */
|
||||
--tv-color-bg-active: var(--tv-base-color-common-3); // #f5f5f5 分页选中背景色/左侧导航选中背景色
|
||||
--tv-color-bg-active-control: var(--tv-base-color-brand-6); // #1476ff 主色蓝，单选/复选选中背景色、开关开的背景色、选块点击背景色、滑块选中背景色、价格曲线、区域选择选中的背景色
|
||||
--tv-color-bg-active-primary: var(--tv-base-color-brand); // #191919 品牌色，锚点-当前位置的圆点背景色/leftmenuthin左侧导航收起图标选中的背景色、NPS评分选中背景色
|
||||
--tv-color-bg-active-secondary: var(--tv-base-color-common-1); // #fff 次要背景色active色/下拉选中的背景色/一级tab页签背景-选中色/树控件选中背景颜色
|
||||
--tv-color-bg-active-emphasize: var(--tv-base-color-brand-2); // #deecff 时间选择选中背景色
|
||||
--tv-color-bg-active-emphasize-light: var(--tv-base-color-brand-1); // #f0f7ff 表格选中背景色
|
||||
|
||||
/** 2.7 边框色/分割线颜色 **/
|
||||
|
||||
/* 2.7.1 边框 */
|
||||
--tv-color-border: var(--tv-base-color-common-7); // #c2c2c2 线条-正常色
|
||||
--tv-color-border-hover: var(--tv-base-color-brand); // #191919 线条悬浮色
|
||||
--tv-color-border-active: var(--tv-base-color-brand); // #191919 线条active色
|
||||
--tv-color-border-active-control: var(--tv-base-color-brand-6); // #1476ff 主色蓝，单选/复选选中的边框色
|
||||
--tv-color-border-disabled: var(--tv-base-color-common-6); // #dbdbdb 线条禁用色
|
||||
--tv-color-border-secondary: var(--tv-base-color-common-9); // #595959 线条-次要色：次要按钮边框默认色
|
||||
--tv-color-border-ghost: var(--tv-base-color-common-8); // #808080
|
||||
--tv-color-border-ghost-active: var(--tv-base-color-common-6); // #dbdbdb
|
||||
|
||||
/* 2.7.2 分割线 */
|
||||
--tv-color-border-divider: var(--tv-base-color-common-4); // #f0f0f0 分割线1（较长分割线场景）
|
||||
--tv-color-border-divider-short: var(--tv-base-color-common-6); // #dbdbdb 分割线2（较短分割线场景）
|
||||
|
||||
/** 3. 字体变量 **/
|
||||
|
||||
/* 3.1 字体家族 -- 【组件内不要指定】 */
|
||||
--tv-font-family: 'Helvetica', 'Arial', 'PingFangSC-Regular', 'Hiragino Sans GB', 'Microsoft YaHei', '微软雅黑', 'Microsoft JhengHei'; // 默认中文
|
||||
--tv-font-family-1: 'Arial', 'San Francisco', 'Helvetica'; // 数字 / 英文
|
||||
|
||||
/* 3.2 字号 */
|
||||
--tv-font-size-sm: 12px; // 辅助文本
|
||||
--tv-font-size-md: 14px; // 正文，默认字体尺寸
|
||||
--tv-font-size-lg: 16px;
|
||||
--tv-font-size-xl: 18px;
|
||||
--tv-font-size-xxl: 20px;
|
||||
|
||||
--tv-font-size-heading-xs: 16px; // 卡片标题
|
||||
--tv-font-size-heading-sm: 18px; // 页面标题
|
||||
--tv-font-size-heading-md: 20px; // 弹窗标题、数字
|
||||
--tv-font-size-heading-lg: 24px; // 数字、面额
|
||||
--tv-font-size-heading-xl: 32px; // 数字、面额
|
||||
|
||||
/** 3.3 行高 */
|
||||
|
||||
--tv-line-height-number: 1.5;
|
||||
|
||||
/* 3.4 字重 */
|
||||
--tv-font-weight-thin: 200;
|
||||
--tv-font-weight-regular: 400; // 默认值：nomal
|
||||
--tv-font-weight-bold: 600;
|
||||
|
||||
/** 4. 圆角变量 **/
|
||||
--tv-border-radius-xs: 2px;
|
||||
--tv-border-radius-sm: 4px;
|
||||
--tv-border-radius-md: 6px; // 默认
|
||||
--tv-border-radius-lg: 8px;
|
||||
--tv-border-radius-round: 999px; // 50% 会造成椭圆，避免使用。 999px是 tiny3的做法。
|
||||
|
||||
/** 5. 边框 **/
|
||||
--tv-border-width: 1px;
|
||||
|
||||
/** 6. 间距变量 space ----margin、padding、top、 left 、 right、bottom **/
|
||||
--tv-space-base: 4px;
|
||||
--tv-space-xs: 2px;
|
||||
--tv-space-sm: var(--tv-space-base);
|
||||
--tv-space-md: calc(var(--tv-space-base) * 2);
|
||||
--tv-space-lg: calc(var(--tv-space-base) * 3);
|
||||
--tv-space-xl: calc(var(--tv-space-base) * 4);
|
||||
|
||||
/** 7. 尺寸变量 size **/
|
||||
|
||||
/** 尺寸系数 calc */
|
||||
--tv-size-base: 4px;
|
||||
|
||||
/** 7.1 表单类组件的 height */
|
||||
--tv-size-height-xs: 24px; // mini 尺寸
|
||||
--tv-size-height-sm: 28px; // small 尺寸
|
||||
--tv-size-height-md: 32px; // medium 尺寸 - 默认
|
||||
--tv-size-height-lg: 40px; // large 尺寸
|
||||
--tv-size-height-xl: 48px; // xLarge 尺寸
|
||||
|
||||
/** 7.2 图标大小 width, height **/
|
||||
--tv-icon-size: 16px;
|
||||
|
||||
/** 8. 阴影变量 box-shadow **/
|
||||
--tv-shadow-0: 0 4px 16px 0 rgba(0, 0, 0, 0.08); // 页面布局容器组件（layout-section）阴影
|
||||
--tv-shadow-1: 0 0 0 0 rgba(0, 0, 0, 0); // 页面布局容器组件（layout-section）阴影
|
||||
|
||||
--tv-shadow-1-up: 0 -1px 4px 0 rgba(0, 0, 0, 0.08); // 购买浮层
|
||||
--tv-shadow-1-down: 0 1px 4px 0 rgba(0, 0, 0, 0.08); // 页面卡片、滑块、顶部导航
|
||||
--tv-shadow-1-left: -1px 0 4px 0 rgba(0, 0, 0, 0.08);
|
||||
--tv-shadow-1-right: 1px 0 4px 0 rgba(0, 0, 0, 0.08); // 手风琴（leftmenu）
|
||||
|
||||
--tv-shadow-2-up: 0 -2px 12px 0 rgba(0, 0, 0, 0.16);
|
||||
--tv-shadow-2-down: 0 2px 12px 0 rgba(0, 0, 0, 0.16); // tips提示、扩展视图
|
||||
--tv-shadow-2-left: -2px 0 12px 0 rgba(0, 0, 0, 0.16);
|
||||
--tv-shadow-2-right: 2px 0 12px 0 rgba(0, 0, 0, 0.16);
|
||||
|
||||
--tv-shadow-3-up: 0 -4px 16px 0 rgba(0, 0, 0, 0.08);
|
||||
--tv-shadow-3-down: 0 4px 16px 0 rgba(0, 0, 0, 0.08); // 卡片hover/选中、下拉面板
|
||||
--tv-shadow-3-left: -4px 0 16px 0 rgba(0, 0, 0, 0.08);
|
||||
--tv-shadow-3-right: 4px 0 16px 0 rgba(0, 0, 0, 0.08);
|
||||
|
||||
--tv-shadow-4-up: 0 -8px 24px 0 rgba(0, 0, 0, 0.16);
|
||||
--tv-shadow-4-down: 0 8px 24px 0 rgba(0, 0, 0, 0.16); // 弹窗、气泡确认框
|
||||
--tv-shadow-4-left: -8px 0 24px 0 rgba(0, 0, 0, 0.16); // 右侧抽屉
|
||||
--tv-shadow-4-right: 8px 0 24px 0 rgba(0, 0, 0, 0.16);
|
||||
|
||||
/** 9. 滚动条变量 **/
|
||||
--tv-size-scrollbar-width: 8px; // 滚动条宽度
|
||||
--tv-size-scrollbar-height: 8px; // 滚动条高度
|
||||
--tv-border-radius-scrollbar-thumb: 4px; // 滑块圆角
|
||||
--tv-color-bg-scrollbar-thumb: var(--tv-base-color-common-6); // #dbdbdb 滑块背景色
|
||||
--tv-color-bg-scrollbar-thumb-hover: var(--tv-base-color-common-6); // #dbdbdb 滑块hover背景色
|
||||
--tv-color-bg-scrollbar-thumb-active: var(--tv-base-color-common-6); // #dbdbdb 滑块active背景色
|
||||
--tv-color-bg-scrollbar-track: var(--tv-base-color-common-1); // #fff 轨道背景色
|
||||
}
|
||||
|
|
@ -34,6 +34,15 @@
|
|||
color: var(--tv-color-text-active) !important;
|
||||
}
|
||||
|
||||
// 图标的默认样式
|
||||
.@{svg-prefix-cls} {
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
vertical-align: middle;
|
||||
overflow: hidden;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
[class*=~'@{css-prefix}'] {
|
||||
-webkit-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
|
|
@ -123,12 +132,6 @@
|
|||
padding: 0;
|
||||
}
|
||||
|
||||
// 清除IE
|
||||
input::-ms-clear,
|
||||
input::-ms-reveal {
|
||||
display: none;
|
||||
}
|
||||
|
||||
button::-moz-focus-inner,
|
||||
input::-moz-focus-inner {
|
||||
border: 0;
|
||||
|
|
|
|||
|
|
@ -0,0 +1,7 @@
|
|||
@import '../custom.less';
|
||||
@button-prefix-cls: ~'@{css-prefix}button';
|
||||
|
||||
.@{button-prefix-cls} {
|
||||
// 默认时按钮字重
|
||||
--tv-Button-font-weight: var(--tv-font-weight-thin);
|
||||
}
|
||||
|
|
@ -1,15 +1,3 @@
|
|||
/**
|
||||
* Copyright (c) 2022 - present TinyVue Authors.
|
||||
* Copyright (c) 2022 - present Huawei Cloud Computing Technologies Co., Ltd.
|
||||
*
|
||||
* Use of this source code is governed by an MIT-style license.
|
||||
*
|
||||
* THE OPEN SOURCE SOFTWARE IN THIS PRODUCT IS DISTRIBUTED IN THE HOPE THAT IT WILL BE USEFUL,
|
||||
* BUT WITHOUT ANY WARRANTY, WITHOUT EVEN THE IMPLIED WARRANTY OF MERCHANTABILITY OR FITNESS FOR
|
||||
* A PARTICULAR PURPOSE. SEE THE APPLICABLE LICENSES FOR MORE DETAILS.
|
||||
*
|
||||
*/
|
||||
|
||||
@import './action-menu/index.less';
|
||||
@import './alert/index.less';
|
||||
@import './amount/index.less';
|
||||
|
|
|
|||
|
|
@ -0,0 +1,2 @@
|
|||
@import './base/old-theme.less';
|
||||
@import './button/old-theme.less';
|
||||
|
|
@ -1,23 +0,0 @@
|
|||
/**
|
||||
* Copyright (c) 2022 - present TinyVue Authors.
|
||||
* Copyright (c) 2022 - present Huawei Cloud Computing Technologies Co., Ltd.
|
||||
*
|
||||
* Use of this source code is governed by an MIT-style license.
|
||||
*
|
||||
* THE OPEN SOURCE SOFTWARE IN THIS PRODUCT IS DISTRIBUTED IN THE HOPE THAT IT WILL BE USEFUL,
|
||||
* BUT WITHOUT ANY WARRANTY, WITHOUT EVEN THE IMPLIED WARRANTY OF MERCHANTABILITY OR FITNESS FOR
|
||||
* A PARTICULAR PURPOSE. SEE THE APPLICABLE LICENSES FOR MORE DETAILS.
|
||||
*
|
||||
*/
|
||||
|
||||
@import '../custom.less';
|
||||
|
||||
@svg-prefix-cls: ~'@{css-prefix}svg';
|
||||
|
||||
.@{svg-prefix-cls} {
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
vertical-align: middle;
|
||||
overflow: hidden;
|
||||
display: inline-block;
|
||||
}
|
||||
|
|
@ -1,146 +1 @@
|
|||
/**
|
||||
* Copyright (c) 2022 - present TinyVue Authors.
|
||||
* Copyright (c) 2022 - present Huawei Cloud Computing Technologies Co., Ltd.
|
||||
*
|
||||
* Use of this source code is governed by an MIT-style license.
|
||||
*
|
||||
* THE OPEN SOURCE SOFTWARE IN THIS PRODUCT IS DISTRIBUTED IN THE HOPE THAT IT WILL BE USEFUL,
|
||||
* BUT WITHOUT ANY WARRANTY, WITHOUT EVEN THE IMPLIED WARRANTY OF MERCHANTABILITY OR FITNESS FOR
|
||||
* A PARTICULAR PURPOSE. SEE THE APPLICABLE LICENSES FOR MORE DETAILS.
|
||||
*
|
||||
*/
|
||||
|
||||
import definedComponents from './theme.config'
|
||||
|
||||
/**
|
||||
* TinyVue主题切换类 负责CSS变量主题的装卸，主题元数据转换成主题数据
|
||||
* 使用示例：new TinyThemeTool(theme,'styleSheetId')
|
||||
* @param {Object} theme 主题配置数据，结构如下：
|
||||
* {
|
||||
* id: 'tiny-infinity-theme',
|
||||
* name: 'Infinity',
|
||||
* cnName: '无限',
|
||||
* data: {'ti-base-color': 'white'}
|
||||
* }
|
||||
* @param {String} styleSheetId style标签的id
|
||||
*/
|
||||
|
||||
export default class TinyThemeTool {
|
||||
constructor(theme, styleSheetId = 'tinyThemeVariables') {
|
||||
// 当前主题
|
||||
this.currentTheme = null
|
||||
|
||||
// 当前style标签元素
|
||||
this.contentElement = null
|
||||
|
||||
// 当前style标签的id
|
||||
this.styleSheetId = null
|
||||
|
||||
// 默认主题
|
||||
this.defaultTheme = {
|
||||
id: 'tiny-default-theme',
|
||||
name: 'Default',
|
||||
cnName: '默认',
|
||||
data: {}
|
||||
}
|
||||
|
||||
let currentTheme = theme
|
||||
if (!theme) {
|
||||
currentTheme = this.defaultTheme
|
||||
}
|
||||
this.styleSheetId = styleSheetId
|
||||
this.changeTheme(currentTheme)
|
||||
}
|
||||
|
||||
changeTheme(theme) {
|
||||
let currentTheme = theme
|
||||
if (typeof window === 'undefined' || typeof document === 'undefined') {
|
||||
throw new TypeError('当前主题工具只支持浏览器环境')
|
||||
}
|
||||
if (!theme) {
|
||||
currentTheme = this.defaultTheme
|
||||
}
|
||||
this.currentTheme = currentTheme
|
||||
if (!this.contentElement) {
|
||||
const styleElement = document.getElementById(this.styleSheetId)
|
||||
if (styleElement) {
|
||||
this.contentElement = styleElement
|
||||
} else {
|
||||
this.contentElement = document.createElement('style')
|
||||
this.contentElement.id = this.styleSheetId
|
||||
document.head.appendChild(this.contentElement)
|
||||
}
|
||||
}
|
||||
this.contentElement.textContent = this.formatCSSVariables(currentTheme.data)
|
||||
this.contentElement.setAttribute('tiny-theme', this.currentTheme.id)
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取需要设置主题变量的选择器，支持多个选择器（在 theme.config.js 中配置，多个选择器之间通过逗号分隔）
|
||||
* @param {theme.config 配置文件中的 key} key
|
||||
* @returns 需要设置主题变量的选择器
|
||||
* @example
|
||||
* 示例1：输入：checkbox-button，输出：.tiny-checkbox-button[class*=tiny]
|
||||
* 示例2：输入：month-table，输出：.tiny-month-table[class*=tiny],.tiny-year-table[class*=tiny]
|
||||
*/
|
||||
getSelectorByKey(compNameList) {
|
||||
const threeKey = `${compNameList[1]}-${compNameList[2]}-${compNameList[3]}`
|
||||
const twoKey = `${compNameList[1]}-${compNameList[2]}`
|
||||
let key = compNameList[1]
|
||||
let value = definedComponents[key] || key
|
||||
if (definedComponents[threeKey]) {
|
||||
key = threeKey
|
||||
value = definedComponents[threeKey]
|
||||
} else if (definedComponents[twoKey]) {
|
||||
key = twoKey
|
||||
value = definedComponents[twoKey]
|
||||
}
|
||||
|
||||
let selector = ''
|
||||
const keyItems = value.split(',')
|
||||
keyItems.forEach((componentName, index) => {
|
||||
// 加上 [class*=tiny] 是为了提高权重，促使主题变换成功
|
||||
selector += '.tiny-' + componentName + '[class*=tiny]' + (index < keyItems.length - 1 ? ',' : '')
|
||||
})
|
||||
return selector
|
||||
}
|
||||
|
||||
// 通过 `组件css变量`，来推导出组件名： 从 ti-checkbox-button-bg-color， 推导出 checkbox-button
|
||||
findClassName(name) {
|
||||
const compNameList = name.split('-')
|
||||
if (compNameList.length < 2) {
|
||||
return false
|
||||
}
|
||||
|
||||
// 优先三段式命名的组件名，优先级从高到低为三段-二段-一段
|
||||
return this.getSelectorByKey(compNameList)
|
||||
}
|
||||
|
||||
formatCSSVariables(themeData) {
|
||||
const componentsMap = {}
|
||||
let rootCssVar = 'html:root {'
|
||||
let componentsCssVar = ''
|
||||
|
||||
Object.keys(themeData).forEach((item) => {
|
||||
const isBaseCssVar = item.startsWith('ti-base') || item.startsWith('ti-common')
|
||||
if (isBaseCssVar) {
|
||||
rootCssVar += `--${item}:${themeData[item]};`
|
||||
} else {
|
||||
const classkey = this.findClassName(item)
|
||||
if (classkey) {
|
||||
if (componentsMap[classkey]) {
|
||||
componentsMap[classkey].push(`--${item}:${themeData[item]};`)
|
||||
} else {
|
||||
componentsMap[classkey] = [`--${item}:${themeData[item]};`]
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
Object.keys(componentsMap).forEach((item) => {
|
||||
componentsCssVar += `${item}{${componentsMap[item].join('')}}`
|
||||
})
|
||||
|
||||
return `${rootCssVar}}${componentsCssVar}`
|
||||
}
|
||||
}
|
||||
export default class TinyThemeTool {}
|
||||
|
|
|
|||
|
|
@ -1,102 +0,0 @@
|
|||
/**
|
||||
* Copyright (c) 2022 - present TinyVue Authors.
|
||||
* Copyright (c) 2022 - present Huawei Cloud Computing Technologies Co., Ltd.
|
||||
*
|
||||
* Use of this source code is governed by an MIT-style license.
|
||||
*
|
||||
* THE OPEN SOURCE SOFTWARE IN THIS PRODUCT IS DISTRIBUTED IN THE HOPE THAT IT WILL BE USEFUL,
|
||||
* BUT WITHOUT ANY WARRANTY, WITHOUT EVEN THE IMPLIED WARRANTY OF MERCHANTABILITY OR FITNESS FOR
|
||||
* A PARTICULAR PURPOSE. SEE THE APPLICABLE LICENSES FOR MORE DETAILS.
|
||||
*
|
||||
*/
|
||||
|
||||
// 键名对应变量名前面的2或3个字段，键值对应此类变量需要挂载到的类名。通过对象索引提高主题化生成速度
|
||||
export default {
|
||||
'action-menu': 'action-menu',
|
||||
'bulletin-board': 'bulletin-board',
|
||||
'button-group': 'button-group',
|
||||
'card-container': 'card-container',
|
||||
'card-item': 'card-item',
|
||||
'card-layout': 'card-layout',
|
||||
'card-template': 'card-template',
|
||||
'carousel-item': 'carousel-item',
|
||||
'cascader-menu': 'cascader-menu',
|
||||
'cascader-panel': 'cascader-panel',
|
||||
'cascader-node': 'cascader-node',
|
||||
'cascader-border': 'cascader-dropdown', // ti-cascader-border 变量是加在下拉面板 .tiny-cascader-dropdown 上的
|
||||
'checkbox-button': 'checkbox-button',
|
||||
'checkbox-group': 'checkbox-group',
|
||||
'context-menu': 'context-menu',
|
||||
'collapse-item': 'collapse-item',
|
||||
'color-select-panel': 'color-select-panel',
|
||||
'color-picker': 'color-picker',
|
||||
'calendar-view': 'calendar-view',
|
||||
'calendar-view-tooltip': 'calendar-view-tooltip',
|
||||
'detail-page': 'detail-page',
|
||||
'dialog-box': 'dialog-box__wrapper',
|
||||
'dropdown-item': 'dropdown-item',
|
||||
'dropdown-menu': 'dropdown-menu',
|
||||
'drop-roles': 'drop-roles',
|
||||
'drop-times': 'drop-times',
|
||||
'date-panel': 'date-panel',
|
||||
'date-picker': 'date-picker',
|
||||
'date-range': 'date-range-picker',
|
||||
'date-table': 'date-table',
|
||||
'date-editor': 'date-editor',
|
||||
'fall-menu': 'fall-menu',
|
||||
'filter-box': 'filter-box',
|
||||
'filter-panel': 'filter-panel__popover',
|
||||
'form-valid': 'form__valid',
|
||||
'form-item': 'form-item',
|
||||
'img-preview': 'img-preview',
|
||||
'img-preview-item': 'img-preview-item',
|
||||
'ip-address': 'ip-address',
|
||||
'link-menu': 'link-menu',
|
||||
'month-range': 'month-range',
|
||||
'month-table': 'month-table,year-table,quarter-panel__table',
|
||||
'nav-menu': 'nav-menu',
|
||||
'option-group': 'option-group',
|
||||
'picker-panel': 'picker-panel',
|
||||
'popup-horiz-menu': 'popup-horiz-menu',
|
||||
'popup-menu': 'popup-menu',
|
||||
'popconfirm-popover': 'popconfirm-popover',
|
||||
'popupload-dialog': 'popupload__modal',
|
||||
'popupload-table': 'popupload__modal',
|
||||
'quick-link-menu': 'quick-link-menu',
|
||||
'time-picker': 'time-picker',
|
||||
'time-spinner': 'time-spinner',
|
||||
'time-panel': 'time-panel',
|
||||
'time-range': 'time-range',
|
||||
'time-range-picker': 'time-range-picker',
|
||||
'time-select': 'time-select',
|
||||
'scroll-text': 'scroll-text',
|
||||
'slider-input': 'slider__input',
|
||||
'slide-bar': 'slide-bar',
|
||||
'slide-img': 'slide-img',
|
||||
'select-dropdown': 'select-dropdown',
|
||||
'suggest-popup': 'suggest-popup',
|
||||
'tab-item': 'tab-item',
|
||||
'tabs-dropdown': 'tabs-dropdown',
|
||||
'text-parse': 'text-parse',
|
||||
'text-popup': 'text-popup',
|
||||
'toggle-menu': 'toggle-menu',
|
||||
'tree-menu': 'tree-menu',
|
||||
'upload-list': 'upload-list',
|
||||
'upload-tip': 'upload__tip',
|
||||
'upload-dragger': 'upload-dragger',
|
||||
'user-account': 'user-account',
|
||||
'user-card': 'user-card',
|
||||
'user-contact': 'user-contact',
|
||||
'user-head': 'user-head',
|
||||
'user-link': 'user-link',
|
||||
'year-table': 'year-table',
|
||||
'skeleton-item': 'skeleton-item',
|
||||
'radio-button': 'radio-button',
|
||||
'radio-group': 'radio-group',
|
||||
'split': 'split-wrapper',
|
||||
'float-bar': 'float-bar',
|
||||
'grid-radio': 'grid-radio',
|
||||
'grid-filter': 'grid__filter-wrapper',
|
||||
'popeditor': 'popeditor__dialog-box',
|
||||
'image-viewer': 'image-viewer'
|
||||
}
|
||||
|
|
@ -1,561 +0,0 @@
|
|||
export const tinyBaseAuroraTheme = {
|
||||
/* 1.1品牌色 */
|
||||
/* 品牌主色 */
|
||||
'ti-base-color-brand-6': '#1890ff' /* 主色蓝 */,
|
||||
/* 主色衍生色 */
|
||||
'ti-base-color-brand-8': '#096dd9', // 品牌色-8 active
|
||||
'ti-base-color-brand-7': '#0c82f0', // 品牌色-7
|
||||
'ti-base-color-brand-5': '#40a9ff', // 品牌色-5 // hover active
|
||||
'ti-base-color-brand-4': '#000', // 品牌色-4
|
||||
'ti-base-color-brand-3': '#8cc7f7', // 品牌色-3
|
||||
'ti-base-color-brand-2': '#e6f7ff', // 品牌色-2
|
||||
'ti-base-color-brand-1': '#f2f5fc', // 品牌色-1
|
||||
|
||||
/* 1.2中立色 */
|
||||
/* 公用灰色系，用于文本、图标、线条、背景色 */
|
||||
'ti-base-color-common-9': '#181818', // 中立色-9
|
||||
'ti-base-color-common-8': '#2e3243', // 中立色-8 导航条背景
|
||||
'ti-base-color-common-7': '#333', // 中立色-7 默认文本色
|
||||
'ti-base-color-common-6': '#464c59', // 中立色-6
|
||||
'ti-base-color-common-5': '#666', // 中立色-5 次要文本
|
||||
'ti-base-color-common-4': '#54657e', // 中立色-4
|
||||
'ti-base-color-common-3': '#8a8e99', // 中立色-3
|
||||
'ti-base-color-common-2': '#666', // 中立色-2 文本禁用使用
|
||||
'ti-base-color-common-1': '#d9d9d9', // 中立色-1 分隔线，disabled
|
||||
|
||||
/* 1.3背景色 */
|
||||
// 不变，前3个用不到， 后面的看不太出来。
|
||||
'ti-base-color-bg-9': '#cf1322', // 背景-9
|
||||
'ti-base-color-bg-8': '#f5222d', // 背景-8
|
||||
'ti-base-color-bg-7': '#ff4d4f', // 背景-7
|
||||
'ti-base-color-bg-6': '#eef0f5', // 背景-6
|
||||
'ti-base-color-bg-5': '#f5f5f5', // 背景-5
|
||||
'ti-base-color-bg-4': '#fafafa', // 背景-4
|
||||
'ti-base-color-bg-3': '#ffffff', // 背景-3
|
||||
'ti-base-color-bg-2': '#ffffff', // 背景-2
|
||||
'ti-base-color-bg-1': '#ffffff', // 背景-1
|
||||
|
||||
/* 1.4功能色 */
|
||||
'ti-base-color-error-4': '#cf1322', // 错误-4
|
||||
'ti-base-color-error-3': '#f5222d', // 错误-3
|
||||
'ti-base-color-error-2': '#ff4d4f', // 错误-2
|
||||
'ti-base-color-error-1': '#d8bab5', // 错误-1
|
||||
|
||||
'ti-base-color-success-4': '#389e0d', // 成功-4
|
||||
'ti-base-color-success-3': '#52c41a', // 成功-3
|
||||
'ti-base-color-success-2': '#73d13d', // 成功-2
|
||||
'ti-base-color-success-1': '#a6c3b9', // 成功-1
|
||||
|
||||
'ti-base-color-warn-5': '#ffc53d', // 告警-5 文本色使用
|
||||
'ti-base-color-warn-4': '#faad14', // 告警-4 图标色使用
|
||||
'ti-base-color-warn-3': '#ffc53d', // 告警-3 未使用到, 补一个色
|
||||
'ti-base-color-warn-2': '#ffc53d', // 告警-2 border使用
|
||||
'ti-base-color-warn-1': '#d3c6a2', // 告警-1 背景使用
|
||||
|
||||
/* 2.公共色：此处颜色为组件场景色，根据使用场景分为以下几大类，具体组件引用以下颜色，如在使用过程中有问题，请自行按类别添加 */
|
||||
/**
|
||||
* 2.1 基础色
|
||||
**/
|
||||
'ti-common-color-transparent': 'var(--ti-base-color-transparent)',
|
||||
'ti-common-color-light': '#fff',
|
||||
'ti-common-color-dark': '#000',
|
||||
|
||||
/**
|
||||
* 2.2 提示类型颜色
|
||||
* 用于 alert组件、Modal（message）组件、Tag 标签组件、Notify 通知组件涉及功能提示的背景、文字、图标等的颜色使用
|
||||
**/
|
||||
'ti-common-color-text-success': '#333', // 成功-文字色
|
||||
'ti-common-color-success-bg': '#f6ffed', // 成功-背景色
|
||||
'ti-common-color-success-border': '#95de64', // 成功-边框色
|
||||
|
||||
'ti-common-color-error-text': 'var(--ti-base-color-error-3)', // 错误-文字色
|
||||
'ti-common-color-error-bg': '#fff1f0', // 错误-背景色/校验背景色
|
||||
'ti-common-color-error-border': '#ff7875', // 错误-校验边框色
|
||||
|
||||
'ti-common-color-info': '#909399', // 信息-图标色/状态图标-信息
|
||||
'ti-common-color-info-text': '#909399', // 信息-文字色
|
||||
'ti-common-color-info-bg': 'rgba(51, 51, 51, 0.06)', // 信息-背景色
|
||||
'ti-common-color-info-border': 'rgba(51,51,51,.15)', // 信息-边框色
|
||||
|
||||
'ti-common-color-warn-text': '#333', // 告警-文字色
|
||||
'ti-common-color-warn-bg': '#fffbe6', // 告警-背景色
|
||||
'ti-common-color-warn-border': '#ffd666', // 告警-边框色
|
||||
|
||||
'ti-common-color-prompt-text': '#333', // 提示-图标色
|
||||
'ti-common-color-prompt-bg': '#e6f7ff', // 提示-背景色
|
||||
'ti-common-color-prompt-border': '#91d5ff', // 提示-边框色
|
||||
|
||||
/**
|
||||
* 2.3 交互类型颜色
|
||||
* 用于涉及 primary / success / warning / danger / info 类型区分，拥有状态或交互的组件（没有边框）
|
||||
* 例如：Button组件、Badge 标记、Link 文字链接，需要标识一些交互的状态颜色：hover、active、disabled
|
||||
**/
|
||||
'ti-common-color-primary-active': 'var(--ti-base-color-brand-8)',
|
||||
'ti-common-color-primary-disabled': '#bfbfbf',
|
||||
'ti-common-color-primary-disabled-bgcolor': '#d9d9d9',
|
||||
'ti-common-color-primary-disabled-border': '#bfbfbf',
|
||||
'ti-common-color-primary-disabled-text': '#fff',
|
||||
|
||||
'ti-common-color-success-disabled-bgcolor': '#a6c3b9',
|
||||
'ti-common-color-success-active': 'var(--ti-base-color-success-4)',
|
||||
'ti-common-color-success-disabled': 'var(--ti-base-color-success-1)', // 禁用背景色
|
||||
'ti-common-color-success-disabled-border': 'var(--ti-base-color-success-1)', // 禁用边框色
|
||||
'ti-common-color-success-disabled-text': '#fff', // 禁用文本色
|
||||
|
||||
'ti-common-color-warning-disabled': '#d3c6a2',
|
||||
'ti-common-color-warning-disabled-bgcolor': '#d3c6a2',
|
||||
'ti-common-color-warning-disabled-border': '#d3c6a2',
|
||||
'ti-common-color-warning-disabled-text': '#fff',
|
||||
|
||||
'ti-common-color-danger-disabled': '#d8bab5',
|
||||
'ti-common-color-danger-disabled-bgcolor': '#d8bab5',
|
||||
'ti-common-color-danger-disabled-border': '#d8bab5',
|
||||
'ti-common-color-danger-disabled-text': '#fff',
|
||||
|
||||
'ti-common-color-info-disabled': '#bfbfbf',
|
||||
'ti-common-color-info-disabled-bgcolor': '#bfbfbf',
|
||||
'ti-common-color-info-disabled-border': '#bfbfbf',
|
||||
'ti-common-color-info-disabled-text': '#fff',
|
||||
|
||||
/**
|
||||
* 2.4 文本色
|
||||
**/
|
||||
'ti-common-color-text-primary': 'var(--ti-base-color-common-7)', // 一级文本色-重要信息/标题颜色/输入类文本颜色
|
||||
'ti-common-color-text-secondary': '#666', // 二级文本色-次要信息
|
||||
'ti-common-color-text-weaken': 'var(--ti-base-color-common-3)', // 三级文本色-弱化信息/说明文字 未使用
|
||||
'ti-common-color-text-disabled': '#999', // 文本禁用信息
|
||||
'ti-common-color-text-darkbg': 'var(--ti-base-color-common-2)', // 深色背景下文本信息 未使用
|
||||
'ti-common-color-text-darkbg-disabled': 'var(--ti-base-color-common-5)', // 深色背景下文本信息禁用色 未使用
|
||||
'ti-common-color-text-link': '#606266', // 链接色
|
||||
'ti-common-color-text-link-hover': '#40a9ff', // 链接悬浮色
|
||||
'ti-common-color-text-link-darkbg': 'var(--ti-base-color-brand-4)', // 深色背景链接色
|
||||
'ti-common-color-text-link-darkbg-hover': 'var(--ti-base-color-brand-3)', // 深色背景链接悬浮色
|
||||
'ti-common-color-text-highlight': 'var(--ti-base-color-brand-6)', // 文本高亮色
|
||||
'ti-common-color-text-white': 'var(--ti-base-color-white)', // 深色背景或图标上文字色
|
||||
'ti-common-color-text-gray': 'var(--ti-base-color-white)', // 深色背景下的文本色，用于tip
|
||||
'ti-common-color-text-gray-disabled': 'var(--ti-base-color-common-4)', // 深色背景下的灰色文本禁用色，用于tab页签中
|
||||
'ti-common-color-text-important': 'var(--ti-base-color-error-4)', // 文本_金额
|
||||
'ti-common-color-placeholder': '#999', // NewCssVar 占位/禁用文本颜色
|
||||
'ti-common-color-selected-text-color': '#333', // 默认/选中时的文本颜色
|
||||
|
||||
/**
|
||||
* 2.5 图标色
|
||||
**/
|
||||
|
||||
// 浅底背景图标色
|
||||
'ti-common-color-icon-normal': 'var(--ti-base-color-brand-6)',
|
||||
'ti-common-color-icon-hover': 'var(--ti-base-color-brand-6)',
|
||||
'ti-common-color-icon-active': 'var(--ti-base-color-brand-6)',
|
||||
'ti-common-color-icon-disabled': '#999', // 图标禁用色/状态图标-禁用、停止
|
||||
'ti-common-color-icon-white': 'var(--ti-base-color-white)',
|
||||
|
||||
// 灰色背景下图标色
|
||||
'ti-common-color-icon-graybg-normal': '#999',
|
||||
'ti-common-color-icon-graybg-hover': '#999',
|
||||
'ti-common-color-icon-graybg-active': 'var(--ti-base-color-brand-6)',
|
||||
'ti-common-color-icon-graybg-disabled': '#999',
|
||||
|
||||
// 深底背景图标色
|
||||
'ti-common-color-icon-darkbg-normal': 'var(--ti-base-color-common-2)',
|
||||
'ti-common-color-icon-darkbg-hover': 'var(--ti-base-color-brand-5)',
|
||||
'ti-common-color-icon-darkbg-active': 'var(--ti-base-color-brand-5)',
|
||||
'ti-common-color-icon-darkbg-disabled': 'var(--ti-base-color-common-5)',
|
||||
|
||||
// 状态图标背景色
|
||||
'ti-common-color-icon-info': 'var(--ti-base-color-icon-info)', // 状态图标-常规、信息提示
|
||||
|
||||
/**
|
||||
* 2.6 背景色
|
||||
**/
|
||||
/* 基础背景色 各状态色 */
|
||||
'ti-common-color-bg-normal': 'var(--ti-base-color-bg-6)', // 通用背景-页面背景色/下拉搜索框背景色/标签背景色
|
||||
'ti-common-color-bg-emphasize': 'var(--ti-base-color-brand-6)', // 背景高亮色
|
||||
'ti-common-color-bg-disabled': '#f5f5f5',
|
||||
'ti-common-color-bg-hover': 'var(--ti-base-color-brand-8)', // 主色背景悬浮色
|
||||
'ti-common-color-bg-gray': 'var(--ti-base-color-bg-4)', // 新区域组件-悬浮背景色
|
||||
'ti-common-color-bg-secondary': 'var(--ti-base-color-common-2)', // 开关组件-关闭状态-背景色
|
||||
|
||||
/* 重要背景色，主要用于重要按钮场景。仅用于NG的button组件 */
|
||||
'ti-common-bg-primary': 'var(--ti-base-color-bg-8)', // 重要按钮背景色
|
||||
'ti-common-bg-primary-hover': 'var(--ti-base-color-bg-7)', // 重要按钮背景悬浮、focus色
|
||||
'ti-common-bg-primary-active': 'var(--ti-base-color-bg-9)', // 重要按钮背景色按下色
|
||||
|
||||
/* 次要背景色，主要用于次要按钮场景 */
|
||||
'ti-common-bg-minor': 'var(--ti-base-color-bg-2)', // 次要按钮背景色
|
||||
'ti-common-bg-minor-hover': 'var(--ti-base-color-bg-1)', // 次要按钮背景悬浮、focus色
|
||||
'ti-common-bg-minor-active': 'var(--ti-base-color-bg-3)', // 次要按钮背景色按下色
|
||||
|
||||
/* 白底背景状态色 */
|
||||
'ti-common-color-bg-white-normal': 'var(--ti-base-color-white)', // 白色背景，用于输入框背景
|
||||
'ti-common-color-bg-white-emphasize': 'var(--ti-base-color-brand-1)', // 白色hover或强调色，如表头背景、表格悬浮、下拉选项悬浮背景
|
||||
|
||||
/* 浅底背景状态色 */
|
||||
'ti-common-color-bg-light-normal': 'var(--ti-base-color-brand-2)', // 滑块slider-背景色/多选快buttongroup-默认背景色/树组件选中背景色
|
||||
'ti-common-color-bg-light-emphasize': 'var(--ti-base-color-brand-3)', // 浅背景hover或强调色，开关组件“开”禁用背景色
|
||||
|
||||
/* 深色底背景状态色 */
|
||||
'ti-common-color-bg-dark-normal': 'var(--ti-base-color-common-6)', // 一级tab页签背景色
|
||||
'ti-common-color-bg-dark-emphasize': 'var(--ti-base-color-common-4)', // 一级tab页签背景-悬浮色
|
||||
'ti-common-color-bg-dark-active': 'var(--ti-common-color-bg-normal)', // 一级tab页签背景-激活/focus状态背景色
|
||||
'ti-common-color-bg-dark-deep': 'var(--ti-base-color-common-6)', // tip、alert提示背景色
|
||||
'ti-common-color-bg-dark-disabled': 'var(--ti-base-color-common-1)', // 深色背景禁用色，开关组件“关”禁用背景色
|
||||
|
||||
/* 顶部导航背景色,用于navMenu */
|
||||
'ti-common-color-bg-navigation': '#2e3243', // 深色导航背景色
|
||||
'ti-common-color-bg-dark-select': 'var(--ti-base-color-common-9)', // 顶部导航下拉背景色
|
||||
|
||||
/**
|
||||
* 这里类选择组件都使用这里的状态颜色：Select、Autocomplete、Cascader、DatePicker、DropTimes、Search、TimePicker、Roles
|
||||
* TimeSelect、Amount、Area、Company、Country、Currency、Dept、DropRoles、Hrapprover、User、Calendar
|
||||
**/
|
||||
'ti-common-color-selected-background': '#f5f5f5', // 选中高亮背景色
|
||||
'ti-common-color-hover-background': '#e6f7ff', // NewCssVar 组件或者组件下拉选项hover时的背景色
|
||||
|
||||
/**
|
||||
* 2.7 图表色
|
||||
**/
|
||||
'ti-common-color-data-1': 'var(--ti-base-color-success-3)', // 图表数据色-1
|
||||
'ti-common-color-data-2': 'var(--ti-base-color-icon-info)', // 图表数据色-2
|
||||
'ti-common-color-data-3': 'var(--ti-base-color-data-3)', // 图表数据色-3
|
||||
'ti-common-color-data-4': 'var(--ti-base-color-data-4)', // 图表数据色-4
|
||||
'ti-common-color-data-5': 'var(--ti-base-color-data-5)', // 图表数据色-5
|
||||
'ti-common-color-data-6': 'var(--ti-base-color-warn-3)', // 图表数据色-6
|
||||
'ti-common-color-data-7': 'var(--ti-base-color-warn-4)', // 图表数据色-7
|
||||
'ti-common-color-data-8': 'var(--ti-base-color-error-3)', // 图表数据色-8
|
||||
|
||||
/**
|
||||
* 2.8 行高
|
||||
* TinyNG只有一个1.5倍的行高,其余行高抽出来是为了适配AUI，但是全局都是1.5倍行高可以保持风格统一
|
||||
*/
|
||||
|
||||
'ti-common-line-height-number': '1.5', // 文字行高倍数，建议组件中设置行高使用该变量，如有特殊情况，请自行定义
|
||||
'ti-common-line-height-base': '12px', // NewCssVar 跟字号保持一致
|
||||
'ti-common-line-height-1': '14px', // NewCssVar
|
||||
'ti-common-line-height-2': '16px', // NewCssVar
|
||||
'ti-common-line-height-3': '18px', // NewCssVar
|
||||
'ti-common-line-height-4': '20px', // NewCssVar
|
||||
'ti-common-line-height-5': '24px', // NewCssVar
|
||||
'ti-common-line-height-6': '32px', // NewCssVar
|
||||
'ti-common-line-height-7': '36px', // NewCssVar
|
||||
|
||||
/**
|
||||
* 2.9 间距
|
||||
* 适用于组件中的margin、padding
|
||||
**/
|
||||
|
||||
/* 基础间距 */
|
||||
'ti-common-space-base': '4px',
|
||||
'ti-common-space-2x': 'calc(var(--ti-common-space-base) * 2)', // 间距-2
|
||||
'ti-common-space-3x': 'calc(var(--ti-common-space-base) * 3)', // 间距-3
|
||||
'ti-common-space-4x': 'calc(var(--ti-common-space-base) * 4)', // 间距-4
|
||||
'ti-common-space-5x': 'calc(var(--ti-common-space-base) * 5)', // 间距-5
|
||||
'ti-common-space-6x': 'calc(var(--ti-common-space-base) * 6)', // 间距-6
|
||||
'ti-common-space-8x': 'calc(var(--ti-common-space-base) * 8)', // 间距-7
|
||||
'ti-common-space-10x': 'calc(var(--ti-common-space-base) * 10)', // 间距-8
|
||||
|
||||
/* 其他间距 */
|
||||
'ti-common-space-0': '0px', // 其他间距-1
|
||||
'ti-common-space-1': '1px', // 其他间距-2
|
||||
'ti-common-space-6': '6px', // 其他间距-3
|
||||
'ti-common-space-10': '10px', // 其他间距-4
|
||||
'ti-common-dropdown-gap': '2px', // NewCssVar 下拉面板距离上部输入框的间距
|
||||
|
||||
/**
|
||||
* 2.10 阴影
|
||||
**/
|
||||
'ti-common-shadow-1-up': '0 -1px 4px 0 rgba(0, 0, 0, 0.1)', // 阴影-1 上
|
||||
'ti-common-shadow-1-down': '0 1px 4px 0 rgba(0, 0, 0, 0.1)', // 阴影-1 下
|
||||
'ti-common-shadow-1-left': '-1px 0px 4px 0 rgba(0, 0, 0, 0.1)', // 阴影-1 左
|
||||
'ti-common-shadow-1-right': '1px 0px 4px 0 rgba(0, 0, 0, 0.1)', // 阴影-1 右
|
||||
'ti-common-shadow-2-up': '0 -2px 8px 0 rgba(0, 0, 0, 0.2)', // 阴影-2 上
|
||||
'ti-common-shadow-2-down': '0 2px 12px rgba(0, 0, 0, 0.1)', // 阴影-2 下 select 等下拉弹框的阴影
|
||||
'ti-common-shadow-2-left': '-2px 0 8px 0 rgba(238, 10, 10, 0.2)', // 阴影-2 左
|
||||
'ti-common-shadow-2-right': '2px 0 8px 0 rgba(252, 5, 5, 0.2)', // 阴影-2 右
|
||||
'ti-common-shadow-3-up': '0 -4px 16px 0 rgba(0, 0, 0, 0.2)', // 阴影-3 上
|
||||
'ti-common-shadow-3-down': '0 4px 16px 0 rgba(0, 0, 0, 0.2)', // 阴影-3 下
|
||||
'ti-common-shadow-3-left': '-4px 0 16px 0 rgba(0, 0, 0, 0.2)', // 阴影-3 左
|
||||
'ti-common-shadow-3-right': '4px 0 16px 0 rgba(0, 0, 0, 0.2)', // 阴影-3 右
|
||||
'ti-common-shadow-4-up': '0 -8px 40px 0 rgba(0, 0, 0, 0.2)', // 阴影-4 上
|
||||
'ti-common-shadow-4-down': '0 8px 40px 0 rgba(0, 0, 0, 0.2)', // 阴影-4 下
|
||||
'ti-common-shadow-4-left': '-8px 0 40px 0 rgba(0, 0, 0, 0.2)', // 阴影-4 左
|
||||
'ti-common-shadow-4-right': '0 0 10px 0 rgba(0, 0, 0, 0.2)', // 阴影-4 右 modal等弹窗的阴影
|
||||
|
||||
/* 提示类阴影 */
|
||||
'ti-common-shadow-error': '0 1px 3px 0 rgba(199, 54, 54, 0.25)', // 错误
|
||||
'ti-common-shadow-warn': '0 1px 3px 0 rgba(204, 100, 20, 0.25)', // 告警
|
||||
'ti-common-shadow-prompt': '0 1px 3px 0 rgba(70, 94, 184, 0.25)', // 提示
|
||||
'ti-common-shadow-success': '0 1px 3px 0 rgba(39, 176, 128, 0.25)', // 成功
|
||||
|
||||
/**
|
||||
* 2.11 字体
|
||||
**/
|
||||
'ti-common-font-family': 'Helvetica, Arial, microsoft yahei',
|
||||
|
||||
/**
|
||||
* 2.12 字号
|
||||
**/
|
||||
'ti-common-font-size-base': '12px', // NewCssVar 正文-常规
|
||||
'ti-common-font-size-1': '14px', // NewCssVar 标题-小
|
||||
'ti-common-font-size-2': '16px', // NewCssVar 标题-中
|
||||
'ti-common-font-size-3': '18px', // NewCssVar 标题-大
|
||||
'ti-common-font-size-4': '20px', // NewCssVar 字号-4
|
||||
'ti-common-font-size-5': '24px', // NewCssVar 字号-5
|
||||
'ti-common-font-size-6': '32px', // NewCssVar 字号-6
|
||||
'ti-common-font-size-7': '36px', // NewCssVar 字号-7
|
||||
|
||||
/**
|
||||
* 2.13 字重
|
||||
**/
|
||||
'ti-common-font-weight-1': '100', // 极细
|
||||
'ti-common-font-weight-2': '200', // 纤细
|
||||
'ti-common-font-weight-3': '300', // 细体
|
||||
'ti-common-font-weight-4': 'normal', // 常规
|
||||
'ti-common-font-weight-5': '500', // 中等
|
||||
'ti-common-font-weight-6': '600', // 半粗
|
||||
'ti-common-font-weight-7': 'bold', // 粗体
|
||||
'ti-common-font-weight-8': '800', // 中黑
|
||||
'ti-common-font-weight-9': '900', // 黑体
|
||||
'ti-common-font-weight-bold': '700', // NewCssVar
|
||||
|
||||
/**
|
||||
* 2.14 线颜色
|
||||
* 用于边框，分割线等的颜色使用
|
||||
**/
|
||||
'ti-common-color-line-normal': 'var(--ti-base-color-common-1)', // 边框默认色
|
||||
'ti-common-color-line-hover': 'var(--ti-base-color-brand-6)', // 边框悬浮色
|
||||
'ti-common-color-line-active': 'var(--ti-base-color-brand-6)',
|
||||
'ti-common-color-line-disabled': 'var(--ti-base-color-common-1)', // 边框禁用色
|
||||
'ti-common-color-line-dividing': 'var(--ti-base-color-common-1)', // 分割线颜色
|
||||
/* 虚线 */
|
||||
'ti-common-color-dash-line-normal': 'var(--ti-base-color-common-5)',
|
||||
'ti-common-color-dash-line-hover': 'var(--ti-base-color-brand-7)',
|
||||
/* 待整改后删除 */
|
||||
'ti-common-color-border': 'var(--ti-base-color-common-1)', // 边框默认色
|
||||
'ti-common-color-border-hover': 'var(--ti-base-color-brand-6)', // 边框悬浮色
|
||||
|
||||
/**
|
||||
* 2.15 线粗细
|
||||
**/
|
||||
'ti-common-border-weight-normal': '1px', // 常规
|
||||
'ti-common-border-weight-1': '2px', // 较粗
|
||||
'ti-common-border-weight-2': '3px', // 粗
|
||||
|
||||
/**
|
||||
* 2.16 线样式
|
||||
**/
|
||||
'ti-common-border-style-dashed': 'dasehd', // 虚线
|
||||
'ti-common-border-style-dotted': 'dotted', // 点线
|
||||
'ti-common-border-style-solid': 'solid', // 实线
|
||||
|
||||
/**
|
||||
* 2.17 圆角
|
||||
**/
|
||||
'ti-common-border-radius-normal': '2px', // 常规
|
||||
'ti-common-border-radius-0': '0px', // 直角 未使用
|
||||
'ti-common-border-radius-1': '4px', // 圆角-1
|
||||
'ti-common-border-radius-2': '8px', // 圆角-2
|
||||
'ti-common-border-radius-3': '50%', // 圆形
|
||||
|
||||
/**
|
||||
* 2.18 尺寸
|
||||
**/
|
||||
'ti-common-size-base': '4px', // 基础尺寸
|
||||
'ti-common-size-2x': 'calc(var(--ti-common-size-base) * 2)', // 尺寸-2
|
||||
'ti-common-size-3x': 'calc(var(--ti-common-size-base) * 3)', // 尺寸-3
|
||||
'ti-common-size-4x': 'calc(var(--ti-common-size-base) * 4)', // 尺寸-4
|
||||
'ti-common-size-5x': 'calc(var(--ti-common-size-base) * 5)', // 尺寸-5
|
||||
'ti-common-size-6x': 'calc(var(--ti-common-size-base) * 6)', // 尺寸-6
|
||||
'ti-common-size-7x': 'calc(var(--ti-common-size-base) * 7)', // 尺寸-7
|
||||
'ti-common-size-8x': 'calc(var(--ti-common-size-base) * 8)', // 尺寸-8
|
||||
'ti-common-size-9x': 'calc(var(--ti-common-size-base) * 9)', // 尺寸-9
|
||||
'ti-common-size-10x': 'calc(var(--ti-common-size-base) * 10)', // 尺寸-10
|
||||
'ti-common-size-11x': 'calc(var(--ti-common-size-base) * 11)', // 尺寸-11
|
||||
'ti-common-size-12x': 'calc(var(--ti-common-size-base) * 12)', // 尺寸-12
|
||||
'ti-common-size-13x': 'calc(var(--ti-common-size-base) * 13)', // 尺寸-13
|
||||
'ti-common-size-14x': 'calc(var(--ti-common-size-base) * 14)', // 尺寸-14
|
||||
'ti-common-size-15x': 'calc(var(--ti-common-size-base) * 15)', // 尺寸-15
|
||||
'ti-common-size-16x': 'calc(var(--ti-common-size-base) * 16)', // 尺寸-16
|
||||
'ti-common-size-17x': 'calc(var(--ti-common-size-base) * 17)', // 尺寸-17
|
||||
'ti-common-size-18x': 'calc(var(--ti-common-size-base) * 18)', // 尺寸-18
|
||||
'ti-common-size-19x': 'calc(var(--ti-common-size-base) * 19)', // 尺寸-19
|
||||
'ti-common-size-20x': 'calc(var(--ti-common-size-base) * 20)', // 尺寸-20
|
||||
'ti-common-size-21x': 'calc(var(--ti-common-size-base) * 21)', // 尺寸-21
|
||||
'ti-common-size-22x': 'calc(var(--ti-common-size-base) * 22)', // 尺寸-22
|
||||
'ti-common-size-23x': 'calc(var(--ti-common-size-base) * 23)', // 尺寸-23
|
||||
'ti-common-size-24x': 'calc(var(--ti-common-size-base) * 24)', // 尺寸-24
|
||||
'ti-common-size-25x': 'calc(var(--ti-common-size-base) * 25)', // 尺寸-25
|
||||
'ti-common-size-26x': 'calc(var(--ti-common-size-base) * 26)', // 尺寸-26
|
||||
'ti-common-size-27x': 'calc(var(--ti-common-size-base) * 27)', // 尺寸-27
|
||||
'ti-common-size-28x': 'calc(var(--ti-common-size-base) * 28)', // 尺寸-28
|
||||
'ti-common-size-29x': 'calc(var(--ti-common-size-base) * 29)', // 尺寸-29
|
||||
'ti-common-size-30x': 'calc(var(--ti-common-size-base) * 30)', // 尺寸-30
|
||||
'ti-common-size-31x': 'calc(var(--ti-common-size-base) * 31)', // 尺寸-31
|
||||
'ti-common-size-32x': 'calc(var(--ti-common-size-base) * 32)', // 尺寸-32
|
||||
'ti-common-size-33x': 'calc(var(--ti-common-size-base) * 33)', // 尺寸-33
|
||||
'ti-common-size-34x': 'calc(var(--ti-common-size-base) * 34)', // 尺寸-34
|
||||
'ti-common-size-35x': 'calc(var(--ti-common-size-base) * 35)', // 尺寸-35
|
||||
'ti-common-size-36x': 'calc(var(--ti-common-size-base) * 36)', // 尺寸-36
|
||||
'ti-common-size-37x': 'calc(var(--ti-common-size-base) * 37)', // 尺寸-37
|
||||
'ti-common-size-38x': 'calc(var(--ti-common-size-base) * 38)', // 尺寸-38
|
||||
'ti-common-size-39x': 'calc(var(--ti-common-size-base) * 39)', // 尺寸-39
|
||||
'ti-common-size-40x': 'calc(var(--ti-common-size-base) * 40)', // 尺寸-40
|
||||
'ti-common-size-41x': 'calc(var(--ti-common-size-base) * 41)', // 尺寸-41
|
||||
'ti-common-size-42x': 'calc(var(--ti-common-size-base) * 42)', // 尺寸-42
|
||||
'ti-common-size-43x': 'calc(var(--ti-common-size-base) * 43)', // 尺寸-43
|
||||
'ti-common-size-44x': 'calc(var(--ti-common-size-base) * 44)', // 尺寸-44
|
||||
'ti-common-size-45x': 'calc(var(--ti-common-size-base) * 45)', // 尺寸-45
|
||||
'ti-common-size-46x': 'calc(var(--ti-common-size-base) * 46)', // 尺寸-46
|
||||
'ti-common-size-47x': 'calc(var(--ti-common-size-base) * 47)', // 尺寸-47
|
||||
'ti-common-size-48x': 'calc(var(--ti-common-size-base) * 48)', // 尺寸-48
|
||||
'ti-common-size-49x': 'calc(var(--ti-common-size-base) * 49)', // 尺寸-49
|
||||
'ti-common-size-50x': 'calc(var(--ti-common-size-base) * 50)', // 尺寸-50
|
||||
|
||||
/* 其他尺寸 */
|
||||
'ti-common-size-0': '0px', // 其他尺寸-1
|
||||
'ti-common-size-auto': 'auto', // 其他尺寸-2
|
||||
|
||||
/* 以下变量是因为AUI拥有大量的large、medium、normal、minor、samll、mini尺寸， 所以下方是一些抽象尺寸、为了更好的适配AUI (button、tag、alert组件) */
|
||||
'ti-common-size-width-large': 'var(--ti-common-size-33x)', // NewCssVar
|
||||
'ti-common-size-width-medium': 'var(--ti-common-size-30x)', // NewCssVar
|
||||
'ti-common-size-width-normal': 'var(--ti-common-size-20x)', // NewCssVar
|
||||
'ti-common-size-width-minor': '30px', // NewCssVar 待删除
|
||||
|
||||
'ti-common-size-height-large': 'var(--ti-common-size-12x)', // NewCssVar
|
||||
'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
|
||||
|
||||
// 以下皆为新增变量
|
||||
// 新增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.js'
|
||||
|
|
@ -1,45 +0,0 @@
|
|||
{
|
||||
"devui-btn-common-bg": "#E0E0E0",
|
||||
"devui-btn-common-bg-hover": "#BDBDBD",
|
||||
|
||||
"devui-global-bg": "#F2F2F3",
|
||||
"devui-glass-morphism-bg": "rgba(242,242,243,0.9)",
|
||||
"devui-base-bg": "#ffffff",
|
||||
"devui-brand": "#252b3a",
|
||||
"devui-brand-foil": "#f3f4f7",
|
||||
"devui-brand-active-focus": "#252b3a",
|
||||
"devui-primary-active": "#252b3a",
|
||||
"devui-brand-active": "#252b3a",
|
||||
"devui-brand-hover": "#252b3a",
|
||||
"devui-text": "#252b3a",
|
||||
"devui-aide-text": "#575d6c",
|
||||
"devui-placeholder": "#9B9FA8",
|
||||
"devui-disabled-text": "#9B9FA8",
|
||||
"devui-disabled-bg": "#ebebeb",
|
||||
"devui-line": "#CFD0D3",
|
||||
"devui-dividing-line": "#E2E2E6",
|
||||
"devui-list-item-hover-bg": "#E2E2E6",
|
||||
"devui-list-item-active-bg": "#d5d5db",
|
||||
"devui-list-item-active-hover-bg": "#d5d5db",
|
||||
"devui-list-item-selected-bg": "#d5d5db",
|
||||
"devui-list-item-hover-text": "#252b3a",
|
||||
"devui-list-item-active-text": "#252b3a",
|
||||
"devui-icon-text": "#babbc0",
|
||||
"devui-primary": "#252b3a",
|
||||
"devui-primary-hover": "#252b3a",
|
||||
"devui-form-control-line": "#CFD0D3",
|
||||
"devui-form-control-line-hover": "#71757F",
|
||||
"devui-icon-fill": "#575d6c",
|
||||
"devui-icon-fill-weak": "#9B9FA8",
|
||||
"devui-icon-fill-active": "#252b3a",
|
||||
"devui-icon-fill-active-hover": "#252b3a",
|
||||
"devui-shape-icon-fill": "#C7C7D1",
|
||||
"devui-shape-icon-fill-hover": "#AEAEBD",
|
||||
"devui-shape-icon-fill-active": "#AEAEBD",
|
||||
"devui-shape-icon-fill-disabled": "#E0E0E0",
|
||||
"devui-form-control-line-active": "#252b3a",
|
||||
"devui-form-control-line-active-hover": "#252b3a",
|
||||
"devui-connected-overlay-line": "#252b3a",
|
||||
"devui-primary-disabled": "#bebfc4",
|
||||
"devui-icon-fill-active-disabled": "#bebfc4"
|
||||
}
|
||||
|
|
@ -1,22 +0,0 @@
|
|||
/**
|
||||
* Copyright (c) 2022 - present TinyVue Authors.
|
||||
* Copyright (c) 2022 - present Huawei Cloud Computing Technologies Co., Ltd.
|
||||
*
|
||||
* Use of this source code is governed by an MIT-style license.
|
||||
*
|
||||
* THE OPEN SOURCE SOFTWARE IN THIS PRODUCT IS DISTRIBUTED IN THE HOPE THAT IT WILL BE USEFUL,
|
||||
* BUT WITHOUT ANY WARRANTY, WITHOUT EVEN THE IMPLIED WARRANTY OF MERCHANTABILITY OR FITNESS FOR
|
||||
* A PARTICULAR PURPOSE. SEE THE APPLICABLE LICENSES FOR MORE DETAILS.
|
||||
*
|
||||
*/
|
||||
|
||||
export const deepTheme = {
|
||||
'ti-common-color-primary-normal': '#252b3a',
|
||||
'ti-common-color-primary-hover': '#54657e',
|
||||
'ti-button-primary-plain-bg-color': 'rgba(51, 51, 51, 0.06)',
|
||||
|
||||
'ti-base-color-brand-5': '#252b3a',
|
||||
'ti-autocomplete-li-text-color': '#252b3a',
|
||||
'ti-autocomplete-li-hover-bg-color': '#E2E2E6',
|
||||
'ti-autocomplete-li-select-bg-color': '#d5d5db'
|
||||
}
|
||||
|
|
@ -1,5 +0,0 @@
|
|||
{
|
||||
"ti-base-color-brand-6": "#252b3a",
|
||||
"ti-base-color-common-7": "#252b3a",
|
||||
"ti-button-normal-background-color": "#E0E0E0"
|
||||
}
|
||||
|
|
@ -1,164 +0,0 @@
|
|||
/**
|
||||
* Copyright (c) 2022 - present TinyVue Authors.
|
||||
* Copyright (c) 2022 - present Huawei Cloud Computing Technologies Co., Ltd.
|
||||
*
|
||||
* Use of this source code is governed by an MIT-style license.
|
||||
*
|
||||
* THE OPEN SOURCE SOFTWARE IN THIS PRODUCT IS DISTRIBUTED IN THE HOPE THAT IT WILL BE USEFUL,
|
||||
* BUT WITHOUT ANY WARRANTY, WITHOUT EVEN THE IMPLIED WARRANTY OF MERCHANTABILITY OR FITNESS FOR
|
||||
* A PARTICULAR PURPOSE. SEE THE APPLICABLE LICENSES FOR MORE DETAILS.
|
||||
*
|
||||
*/
|
||||
|
||||
// 全量 DevUI 主题变量对应的 Tiny 主题变量
|
||||
export const DEVUI_THEME_MAP = {
|
||||
'devui-global-bg': '#f3f6f8',
|
||||
'devui-glass-morphism-bg': 'rgba(243,246,248,0.9)',
|
||||
'devui-global-bg-normal': '#ffffff',
|
||||
'devui-base-bg': '#ffffff',
|
||||
'devui-base-bg-dark': '#333854',
|
||||
'devui-brand': 'ti-base-color-brand-6',
|
||||
'devui-brand-foil': '#859bff',
|
||||
'devui-brand-hover': '#7693f5',
|
||||
'devui-brand-active': '#526ecc',
|
||||
'devui-brand-active-focus': '#344899',
|
||||
'devui-contrast': '#c7000b',
|
||||
'devui-text': 'ti-base-color-common-7',
|
||||
'devui-text-weak': '#575d6c',
|
||||
'devui-aide-text': '#8a8e99',
|
||||
'devui-aide-text-hover': '#252b3a',
|
||||
'devui-aide-text-stress': '#575d6c',
|
||||
'devui-placeholder': '#8a8e99',
|
||||
'devui-light-text': '#ffffff',
|
||||
'devui-dark-text': '#252b3a',
|
||||
'devui-link': '#526ecc',
|
||||
'devui-link-active': '#344899',
|
||||
'devui-link-light': '#96adfa',
|
||||
'devui-link-light-active': '#beccfa',
|
||||
'devui-line': '#adb0b8',
|
||||
'devui-dividing-line': 'ti-common-color-line-dividing',
|
||||
'devui-block': '#ffffff',
|
||||
'devui-area': '#f8f8f8',
|
||||
'devui-danger': '#f66f6a',
|
||||
'devui-warning': '#fac20a',
|
||||
'devui-waiting': '#9faad7',
|
||||
'devui-success': '#50d4ab',
|
||||
'devui-info': '#5e7ce0',
|
||||
'devui-initial': '#e9edfa',
|
||||
'devui-unavailable': '#f5f5f6',
|
||||
'devui-shadow': 'rgba(37, 43, 58, 0.2)',
|
||||
'devui-light-shadow': 'rgba(37, 43, 58, 0.1)',
|
||||
'devui-connected-overlay-shadow': 'rgba(37, 43, 58, 0.12)',
|
||||
'devui-feedback-overlay-shadow': 'rgba(37, 43, 58, 0.16)',
|
||||
'devui-icon-text': '#252b3a',
|
||||
'devui-icon-bg': '#ffffff',
|
||||
'devui-icon-fill': '#252b3a',
|
||||
'devui-icon-fill-weak': '#babbc0',
|
||||
'devui-icon-fill-hover': '#5e7ce0',
|
||||
'devui-icon-fill-active': '#5e7ce0',
|
||||
'devui-icon-fill-active-hover': 'ti-grid-icon-fill-hover-bg-color',
|
||||
'devui-shape-icon-fill': '#d7d8da',
|
||||
'devui-shape-icon-fill-active': '#babbc0',
|
||||
'devui-shape-icon-fill-hover': '#babbc0',
|
||||
'devui-shape-icon-fill-disabled': '#f5f5f5',
|
||||
'devui-form-control-line': '#adb0b8',
|
||||
'devui-form-control-bg': '#ffffff',
|
||||
'devui-form-control-line-hover': '#575d6c',
|
||||
'devui-form-control-line-active': '#5e7ce0',
|
||||
'devui-form-control-line-active-hover': '#344899',
|
||||
'devui-list-item-active-bg': '#5e7ce0',
|
||||
'devui-list-item-active-text': '#ffffff',
|
||||
'devui-list-item-active-hover-bg': '#526ecc',
|
||||
'devui-list-item-hover-bg': '#f2f5fc',
|
||||
'devui-list-item-hover-text': '#526ecc',
|
||||
'devui-list-item-selected-bg': '#e9edfa',
|
||||
'devui-list-item-strip-bg': '#f2f5fc',
|
||||
'devui-disabled-bg': 'ti-common-color-bg-disabled',
|
||||
'devui-disabled-line': '#dfe1e6',
|
||||
'devui-disabled-text': '#adb0b8',
|
||||
'devui-primary-disabled': '#beccfa',
|
||||
'devui-icon-fill-active-disabled': '#beccfa',
|
||||
'devui-label-bg': '#eef0f5',
|
||||
'devui-connected-overlay-bg': '#ffffff',
|
||||
'devui-connected-overlay-line': '#526ecc',
|
||||
'devui-fullscreen-overlay-bg': '#ffffff',
|
||||
'devui-feedback-overlay-bg': '#464d6e',
|
||||
'devui-feedback-overlay-text': '#dfe1e6',
|
||||
'devui-embed-search-bg': '#f2f5fc',
|
||||
'devui-embed-search-bg-hover': '#eef0f5',
|
||||
'devui-float-block-shadow': 'rgba(94, 124, 224, 0.3)',
|
||||
'devui-highlight-overlay': 'rgba(255, 255, 255, 0.8)',
|
||||
'devui-range-item-hover-bg': '#e9edfa',
|
||||
'devui-primary': 'ti-base-color-brand-6',
|
||||
'devui-primary-hover': '#7693f5',
|
||||
'devui-primary-active': '#344899',
|
||||
'devui-contrast-hover': '#d64a52',
|
||||
'devui-contrast-active': '#b12220',
|
||||
'devui-danger-line': '#f66f6a',
|
||||
'devui-danger-bg': '#ffeeed',
|
||||
'devui-warning-line': '#fa9841',
|
||||
'devui-warning-bg': '#fff3e8',
|
||||
'devui-info-line': '#5e7ce0',
|
||||
'devui-info-bg': '#f2f5fc',
|
||||
'devui-success-line': '#50d4ab',
|
||||
'devui-success-bg': '#edfff9',
|
||||
'devui-primary-line': '#5e7ce0',
|
||||
'devui-primary-bg': '#f2f5fc',
|
||||
'devui-default-line': '#5e7ce0',
|
||||
'devui-default-bg': '#f3f6f8',
|
||||
'devui-shadow-length-base': '0 1px 4px 0',
|
||||
'devui-shadow-length-slide-left': '-2px 0 8px 0',
|
||||
'devui-shadow-length-slide-right': '2px 0 8px 0',
|
||||
'devui-shadow-length-connected-overlay': '0 4px 8px 0',
|
||||
'devui-shadow-length-hover': '0 8px 16px 0',
|
||||
'devui-shadow-length-feedback-overlay': '0 8px 16px 0',
|
||||
'devui-shadow-length-fullscreen-overlay': '0 12px 24px 0',
|
||||
'devui-border-radius': '2px',
|
||||
'devui-border-radius-feedback': '4px',
|
||||
'devui-border-radius-card': '6px',
|
||||
'devui-border-radius-full': '100px',
|
||||
'devui-font-size': '12px',
|
||||
'devui-font-size-card-title': '14px',
|
||||
'devui-font-size-page-title': '16px',
|
||||
'devui-font-size-modal-title': '18px',
|
||||
'devui-font-size-price': '20px',
|
||||
'devui-font-size-data-overview': '24px',
|
||||
'devui-font-size-icon': '16px',
|
||||
'devui-font-size-sm': '12px',
|
||||
'devui-font-size-md': '12px',
|
||||
'devui-font-size-lg': '14px',
|
||||
'devui-font-title-weight': 'bold',
|
||||
'devui-font-content-weight': 'normal',
|
||||
'devui-line-height-base': '1.5',
|
||||
'devui-animation-ease-in-smooth': 'cubic-bezier(0.645, 0.045, 0.355, 1)',
|
||||
'devui-animation-duration-slow': '300ms',
|
||||
'devui-animation-duration-base': '200ms',
|
||||
'devui-animation-duration-fast': '100ms',
|
||||
'devui-animation-ease-in': 'cubic-bezier(0.5, 0, 0.84, 0.25)',
|
||||
'devui-animation-ease-out': 'cubic-bezier(0.16, 0.75, 0.5, 1)',
|
||||
'devui-animation-ease-in-out': 'cubic-bezier(0.5, 0.05, 0.5, 0.95)',
|
||||
'devui-animation-ease-in-out-smooth': 'cubic-bezier(0.645, 0.045, 0.355, 1)',
|
||||
'devui-animation-linear': 'cubic-bezier(0, 0, 1, 1)',
|
||||
'devui-z-index-full-page-overlay': '1080',
|
||||
'devui-z-index-pop-up': '1060',
|
||||
'devui-z-index-dropdown': '1052',
|
||||
'devui-z-index-modal': '1050',
|
||||
'devui-z-index-drawer': '1040',
|
||||
'devui-z-index-framework': '1000',
|
||||
'devui-icon-active-color': '#ffffff',
|
||||
|
||||
'devui-btn-sm-padding': '0 12px',
|
||||
'devui-btn-padding': '0 16px',
|
||||
'devui-btn-lg-padding': '0 20px',
|
||||
'devui-btn-common-bg': 'ti-button-normal-background-color',
|
||||
'devui-btn-common-border-color': 'transparent',
|
||||
'devui-btn-common-bg-hover': '#d1d1d1',
|
||||
'devui-btn-common-color-hover': '#252b3a',
|
||||
'devui-btn-common-border-color-hover': 'transparent',
|
||||
'devui-btn-common-bg-active': '#BDBDBD',
|
||||
'devui-btn-common-color-active': '#252b3a',
|
||||
'devui-btn-common-border-color-active': 'transparent',
|
||||
'devui-btn-common-border-disabled': 'transparent',
|
||||
'devui-icon-hover-bg': '#ebebeb',
|
||||
'devui-icon-active-bg': '#d1d1d1'
|
||||
}
|
||||
|
|
@ -1,124 +0,0 @@
|
|||
{
|
||||
"devui-brand": "#526ECC",
|
||||
"devui-info": "#526ECC",
|
||||
"devui-primary": "#526ECC",
|
||||
"devui-default-line": "#526ECC",
|
||||
"devui-brand-hover": "#5E7CE0",
|
||||
"devui-primary-hover": "#5E7CE0",
|
||||
"devui-brand-foil": "#F2F2F3",
|
||||
"devui-global-bg": "#1A1A1C",
|
||||
"devui-glass-morphism-bg": "rgba(26,26,28,0.9)",
|
||||
"devui-base-bg": "#292A2E",
|
||||
"devui-text": "#CED1DB",
|
||||
"devui-aide-text": "#868A99",
|
||||
"devui-placeholder": "#4E5057",
|
||||
"devui-disabled-text": "#5b5d66",
|
||||
"devui-disabled-bg": "#2D2E32",
|
||||
"devui-line": "#4e5057",
|
||||
"devui-dividing-line": "#323438",
|
||||
"devui-list-item-hover-bg": "#393A3E",
|
||||
"devui-list-item-active-bg": "#303548",
|
||||
"devui-list-item-active-hover-bg": "#303548",
|
||||
"devui-list-item-selected-bg": "#303548",
|
||||
"devui-list-item-hover-text": "#F5F5F5",
|
||||
"devui-list-item-active-text": "#4660B8",
|
||||
"devui-primary-disabled": "#3f3f3f",
|
||||
"devui-form-control-line": "#4e5057",
|
||||
"devui-form-control-bg": "#292A2E",
|
||||
"devui-form-control-line-hover": "#696c75",
|
||||
"devui-form-control-line-active": "#526ECC",
|
||||
"devui-icon-text": "#868A99",
|
||||
"devui-connected-overlay-bg": "#2E2F33",
|
||||
"devui-fullscreen-overlay-bg": "#2E2F33",
|
||||
"devui-warning-line": "#EB8F3D",
|
||||
"devui-warning-bg": "#4b2e14",
|
||||
"devui-success-line": "#2AA37E ",
|
||||
"devui-success-bg": "#123d32",
|
||||
"devui-danger-line": "#D15854",
|
||||
"devui-danger-bg": "#4a2120",
|
||||
"devui-info-line": "#4482BD",
|
||||
"devui-info-bg": "#1c2543",
|
||||
"devui-default-bg": "#313131",
|
||||
"devui-label-bg": "#353537",
|
||||
"devui-icon-fill": "#868A99",
|
||||
"devui-icon-fill-hover": "#ced1db",
|
||||
"devui-icon-fill-active": "#ced1db",
|
||||
"devui-icon-fill-active-hover": "#ced1db",
|
||||
|
||||
"devui-global-bg-normal": "#202124",
|
||||
"devui-base-bg-dark": "#2e2f31",
|
||||
"devui-brand-active": "#526ecc",
|
||||
"devui-brand-active-focus": "#344899",
|
||||
"devui-contrast": "#C7000B",
|
||||
"devui-text-weak": "#A0A0A0",
|
||||
"devui-aide-text-hover": "#73788a",
|
||||
"devui-aide-text-stress": "#A0A0A0",
|
||||
"devui-light-text": "#ffffff",
|
||||
"devui-dark-text": "#252b3a",
|
||||
"devui-link": "#526ECC",
|
||||
"devui-link-active": "#344899",
|
||||
"devui-link-light": "#96adfa",
|
||||
"devui-link-light-active": "#beccfa",
|
||||
"devui-block": "#606061",
|
||||
"devui-area": "#34363A",
|
||||
"devui-danger": "#f66f6a",
|
||||
"devui-warning": "#fac20a",
|
||||
"devui-waiting": "#5e6580",
|
||||
"devui-success": "#50d4ab",
|
||||
"devui-initial": "#64676e",
|
||||
"devui-unavailable": "#5b5b5c",
|
||||
"devui-shadow": "rgba(0, 0, 0, 0.72)",
|
||||
"devui-light-shadow": "rgba(0, 0, 0, 0.3)",
|
||||
"devui-connected-overlay-shadow": "rgba(0, 0, 0, 0.42)",
|
||||
"devui-feedback-overlay-shadow": "rgba(0, 0, 0, 0.54)",
|
||||
|
||||
"devui-icon-bg": "#2E2F31",
|
||||
"devui-shape-icon-fill": "#5b5d66",
|
||||
"devui-shape-icon-fill-active": "#868a99",
|
||||
|
||||
"devui-form-control-line-active-hover": "#344899",
|
||||
"devui-list-item-strip-bg": "#383838",
|
||||
"devui-table-expand-area-bg": "#393a3e",
|
||||
|
||||
"devui-disabled-line": "#505153",
|
||||
"devui-icon-fill-active-disabled": "#2B3458",
|
||||
|
||||
"devui-connected-overlay-line": "#526ecc",
|
||||
"devui-feedback-overlay-bg": "#4C4C4C",
|
||||
"devui-feedback-overlay-text": "#DFE1E6",
|
||||
"devui-embed-search-bg": "#383838",
|
||||
"devui-embed-search-bg-hover": "#3D3E40",
|
||||
"devui-float-block-shadow": "rgba(94, 124, 224, 0.3)",
|
||||
"devui-highlight-overlay": "rgba(255, 255, 255, 0.1)",
|
||||
"devui-range-item-hover-bg": "#454545",
|
||||
|
||||
"devui-primary-active": "#344899",
|
||||
"devui-contrast-hover": "#D64A52",
|
||||
"devui-contrast-active": "#B12220",
|
||||
|
||||
"devui-primary-line": "#546BB7",
|
||||
"devui-primary-bg": "#383D4F",
|
||||
"devui-icon-active-color": "#ffffff",
|
||||
|
||||
"devui-btn-sm-padding": "0 12px",
|
||||
"devui-btn-padding": "0 16px",
|
||||
"devui-btn-lg-padding": "0 20px",
|
||||
"devui-btn-common-bg": "#393a3e",
|
||||
"devui-btn-common-border-color": "transparent",
|
||||
"devui-btn-common-bg-hover": "#4e5057",
|
||||
"devui-btn-common-color-hover": "#CED1DB",
|
||||
"devui-btn-common-border-color-hover": "transparent",
|
||||
"devui-btn-common-bg-active": "#4e5057",
|
||||
"devui-btn-common-color-active": "#CED1DB",
|
||||
"devui-btn-common-border-color-active": "transparent",
|
||||
"devui-btn-common-border-disabled": "transparent",
|
||||
"devui-icon-hover-bg": "#393a3e",
|
||||
"devui-icon-active-bg": "#4e5057",
|
||||
|
||||
"devui-border-radius": "4px",
|
||||
"devui-font-size": "14px",
|
||||
"devui-font-size-md": "14px",
|
||||
"devui-font-size-card-title": "16px",
|
||||
"devui-shadow-length-fullscreen-overlay": "0 0 6px 0",
|
||||
"devui-border-radius-card": "4px"
|
||||
}
|
||||
|
|
@ -1,24 +0,0 @@
|
|||
/**
|
||||
* Copyright (c) 2022 - present TinyVue Authors.
|
||||
* Copyright (c) 2022 - present Huawei Cloud Computing Technologies Co., Ltd.
|
||||
*
|
||||
* Use of this source code is governed by an MIT-style license.
|
||||
*
|
||||
* THE OPEN SOURCE SOFTWARE IN THIS PRODUCT IS DISTRIBUTED IN THE HOPE THAT IT WILL BE USEFUL,
|
||||
* BUT WITHOUT ANY WARRANTY, WITHOUT EVEN THE IMPLIED WARRANTY OF MERCHANTABILITY OR FITNESS FOR
|
||||
* A PARTICULAR PURPOSE. SEE THE APPLICABLE LICENSES FOR MORE DETAILS.
|
||||
*
|
||||
*/
|
||||
|
||||
export const galaxyTheme = {
|
||||
'ti-base-color-bg-1': '#1A1A1C',
|
||||
'ti-base-color-common-7': '#CED1DB',
|
||||
'ti-button-normal-background-color': '#393a3e',
|
||||
'ti-button-normal-hover-bg-color': '#4e5057',
|
||||
'ti-common-color-border': '#353638',
|
||||
'ti-common-color-light': '#292A2E',
|
||||
'ti-common-color-info-normal': 'var(--ti-base-color-common-7)',
|
||||
'ti-common-color-hover-background': '#393A3E',
|
||||
'ti-common-color-selected-background': '#393A3E',
|
||||
'ti-button-primary-text-color': '#ffffff'
|
||||
}
|
||||
|
|
@ -1,5 +0,0 @@
|
|||
{
|
||||
"ti-base-color-brand-6": "#526ECC",
|
||||
"ti-base-color-common-7": "#CED1DB",
|
||||
"ti-button-normal-background-color": "#393a3e"
|
||||
}
|
||||
|
|
@ -1,48 +0,0 @@
|
|||
/**
|
||||
* Copyright (c) 2022 - present TinyVue Authors.
|
||||
* Copyright (c) 2022 - present Huawei Cloud Computing Technologies Co., Ltd.
|
||||
*
|
||||
* Use of this source code is governed by an MIT-style license.
|
||||
*
|
||||
* THE OPEN SOURCE SOFTWARE IN THIS PRODUCT IS DISTRIBUTED IN THE HOPE THAT IT WILL BE USEFUL,
|
||||
* BUT WITHOUT ANY WARRANTY, WITHOUT EVEN THE IMPLIED WARRANTY OF MERCHANTABILITY OR FITNESS FOR
|
||||
* A PARTICULAR PURPOSE. SEE THE APPLICABLE LICENSES FOR MORE DETAILS.
|
||||
*
|
||||
*/
|
||||
|
||||
const fs = require('node:fs')
|
||||
require('esbuild-register')
|
||||
|
||||
const { DEVUI_THEME_MAP } = require('./devui-theme-map')
|
||||
|
||||
const themes = ['impression-theme', 'infinity-theme', 'deep-theme', 'galaxy-theme']
|
||||
|
||||
function generateTheme(themeName) {
|
||||
const themeData = {}
|
||||
|
||||
for (let mapItemKey of Object.keys(DEVUI_THEME_MAP)) {
|
||||
const mapItemValue = DEVUI_THEME_MAP[mapItemKey]
|
||||
if (mapItemValue.includes('ti-')) {
|
||||
const themeJson = require(`./${themeName}/devui.json`)
|
||||
for (let themeItemKey in themeJson) {
|
||||
if (themeItemKey === mapItemKey) {
|
||||
themeData[mapItemValue] = themeJson[themeItemKey]
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
fs.writeFile(`./${themeName}/index.json`, JSON.stringify(themeData, null, ' '), (err) => {
|
||||
if (err) {
|
||||
throw new Error('写入文件出错！')
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
function main() {
|
||||
for (let theme of themes) {
|
||||
generateTheme(theme)
|
||||
}
|
||||
}
|
||||
|
||||
main()
|
||||
|
|
@ -1,136 +0,0 @@
|
|||
{
|
||||
"devui-global-bg": "#f3f6f8",
|
||||
"devui-glass-morphism-bg": "rgba(243,246,248,0.9)",
|
||||
"devui-global-bg-normal": "#ffffff",
|
||||
"devui-base-bg": "#ffffff",
|
||||
"devui-base-bg-dark": "#333854",
|
||||
"devui-brand": "#5e7ce0",
|
||||
"devui-brand-foil": "#859bff",
|
||||
"devui-brand-hover": "#7693f5",
|
||||
"devui-brand-active": "#526ecc",
|
||||
"devui-brand-active-focus": "#344899",
|
||||
"devui-contrast": "#c7000b",
|
||||
"devui-text": "#252b3a",
|
||||
"devui-text-weak": "#575d6c",
|
||||
"devui-aide-text": "#8a8e99",
|
||||
"devui-aide-text-hover":"#252b3a",
|
||||
"devui-aide-text-stress": "#575d6c",
|
||||
"devui-placeholder": "#8a8e99",
|
||||
"devui-light-text": "#ffffff",
|
||||
"devui-dark-text": "#252b3a",
|
||||
"devui-link": "#526ecc",
|
||||
"devui-link-active": "#344899",
|
||||
"devui-link-light": "#96adfa",
|
||||
"devui-link-light-active": "#beccfa",
|
||||
"devui-line": "#adb0b8",
|
||||
"devui-dividing-line": "#dfe1e6",
|
||||
"devui-block": "#ffffff",
|
||||
"devui-area": "#f8f8f8",
|
||||
"devui-danger": "#f66f6a",
|
||||
"devui-warning": "#fac20a",
|
||||
"devui-waiting": "#9faad7",
|
||||
"devui-success": "#50d4ab",
|
||||
"devui-info": "#5e7ce0",
|
||||
"devui-initial": "#e9edfa",
|
||||
"devui-unavailable": "#f5f5f6",
|
||||
"devui-shadow": "rgba(37, 43, 58, 0.2)",
|
||||
"devui-light-shadow": "rgba(37, 43, 58, 0.1)",
|
||||
"devui-connected-overlay-shadow": "rgba(37, 43, 58, 0.12)",
|
||||
"devui-feedback-overlay-shadow": "rgba(37, 43, 58, 0.16)",
|
||||
"devui-icon-text": "#252b3a",
|
||||
"devui-icon-bg": "#ffffff",
|
||||
"devui-icon-fill": "#252b3a",
|
||||
"devui-icon-fill-weak": "#babbc0",
|
||||
"devui-icon-fill-hover": "#5e7ce0",
|
||||
"devui-icon-fill-active": "#5e7ce0",
|
||||
"devui-icon-fill-active-hover": "#526ecc",
|
||||
"devui-shape-icon-fill": "#d7d8da",
|
||||
"devui-shape-icon-fill-active": "#babbc0",
|
||||
"devui-shape-icon-fill-hover": "#babbc0",
|
||||
"devui-shape-icon-fill-disabled":"#f5f5f5",
|
||||
"devui-form-control-line": "#adb0b8",
|
||||
"devui-form-control-bg": "#ffffff",
|
||||
"devui-form-control-line-hover": "#575d6c",
|
||||
"devui-form-control-line-active": "#5e7ce0",
|
||||
"devui-form-control-line-active-hover": "#344899",
|
||||
"devui-list-item-active-bg": "#5e7ce0",
|
||||
"devui-list-item-active-text": "#ffffff",
|
||||
"devui-list-item-active-hover-bg": "#526ecc",
|
||||
"devui-list-item-hover-bg": "#f2f5fc",
|
||||
"devui-list-item-hover-text": "#526ecc",
|
||||
"devui-list-item-selected-bg": "#e9edfa",
|
||||
"devui-list-item-strip-bg": "#f2f5fc",
|
||||
"devui-disabled-bg": "#f5f5f6",
|
||||
"devui-disabled-line": "#dfe1e6",
|
||||
"devui-disabled-text": "#adb0b8",
|
||||
"devui-primary-disabled": "#beccfa",
|
||||
"devui-icon-fill-active-disabled": "#beccfa",
|
||||
"devui-label-bg": "#eef0f5",
|
||||
"devui-connected-overlay-bg": "#ffffff",
|
||||
"devui-connected-overlay-line": "#526ecc",
|
||||
"devui-fullscreen-overlay-bg": "#ffffff",
|
||||
"devui-feedback-overlay-bg": "#464d6e",
|
||||
"devui-feedback-overlay-text": "#dfe1e6",
|
||||
"devui-embed-search-bg": "#f2f5fc",
|
||||
"devui-embed-search-bg-hover": "#eef0f5",
|
||||
"devui-float-block-shadow": "rgba(94, 124, 224, 0.3)",
|
||||
"devui-highlight-overlay": "rgba(255, 255, 255, 0.8)",
|
||||
"devui-range-item-hover-bg": "#e9edfa",
|
||||
"devui-primary": "#5e7ce0",
|
||||
"devui-primary-hover": "#7693f5",
|
||||
"devui-primary-active": "#344899",
|
||||
"devui-contrast-hover": "#d64a52",
|
||||
"devui-contrast-active": "#b12220",
|
||||
"devui-danger-line": "#f66f6a",
|
||||
"devui-danger-bg": "#ffeeed",
|
||||
"devui-warning-line": "#fa9841",
|
||||
"devui-warning-bg": "#fff3e8",
|
||||
"devui-info-line": "#5e7ce0",
|
||||
"devui-info-bg": "#f2f5fc",
|
||||
"devui-success-line": "#50d4ab",
|
||||
"devui-success-bg": "#edfff9",
|
||||
"devui-primary-line": "#5e7ce0",
|
||||
"devui-primary-bg": "#f2f5fc",
|
||||
"devui-default-line": "#5e7ce0",
|
||||
"devui-default-bg": "#f3f6f8",
|
||||
"devui-shadow-length-base": "0 1px 4px 0",
|
||||
"devui-shadow-length-slide-left": "-2px 0 8px 0",
|
||||
"devui-shadow-length-slide-right": "2px 0 8px 0",
|
||||
"devui-shadow-length-connected-overlay": "0 4px 8px 0",
|
||||
"devui-shadow-length-hover": "0 8px 16px 0",
|
||||
"devui-shadow-length-feedback-overlay": "0 8px 16px 0",
|
||||
"devui-shadow-length-fullscreen-overlay": "0 12px 24px 0",
|
||||
"devui-border-radius": "2px",
|
||||
"devui-border-radius-feedback": "4px",
|
||||
"devui-border-radius-card": "6px",
|
||||
"devui-border-radius-full": "100px",
|
||||
"devui-font-size": "12px",
|
||||
"devui-font-size-card-title": "14px",
|
||||
"devui-font-size-page-title": "16px",
|
||||
"devui-font-size-modal-title": "18px",
|
||||
"devui-font-size-price": "20px",
|
||||
"devui-font-size-data-overview": "24px",
|
||||
"devui-font-size-icon": "16px",
|
||||
"devui-font-size-sm": "12px",
|
||||
"devui-font-size-md": "12px",
|
||||
"devui-font-size-lg": "14px",
|
||||
"devui-font-title-weight": "bold",
|
||||
"devui-font-content-weight": "normal",
|
||||
"devui-line-height-base": "1.5",
|
||||
"devui-animation-ease-in-smooth": "cubic-bezier(0.645, 0.045, 0.355, 1)",
|
||||
"devui-animation-duration-slow": "300ms",
|
||||
"devui-animation-duration-base": "200ms",
|
||||
"devui-animation-duration-fast": "100ms",
|
||||
"devui-animation-ease-in": "cubic-bezier(0.5, 0, 0.84, 0.25)",
|
||||
"devui-animation-ease-out": "cubic-bezier(0.16, 0.75, 0.5, 1)",
|
||||
"devui-animation-ease-in-out": "cubic-bezier(0.5, 0.05, 0.5, 0.95)",
|
||||
"devui-animation-ease-in-out-smooth": "cubic-bezier(0.645, 0.045, 0.355, 1)",
|
||||
"devui-animation-linear": "cubic-bezier(0, 0, 1, 1)",
|
||||
"devui-z-index-full-page-overlay": "1080",
|
||||
"devui-z-index-pop-up": "1060",
|
||||
"devui-z-index-dropdown": "1052",
|
||||
"devui-z-index-modal": "1050",
|
||||
"devui-z-index-drawer": "1040",
|
||||
"devui-z-index-framework": "1000",
|
||||
"devui-icon-active-color": "#ffffff"
|
||||
}
|
||||
|
|
@ -1,13 +0,0 @@
|
|||
/**
|
||||
* Copyright (c) 2022 - present TinyVue Authors.
|
||||
* Copyright (c) 2022 - present Huawei Cloud Computing Technologies Co., Ltd.
|
||||
*
|
||||
* Use of this source code is governed by an MIT-style license.
|
||||
*
|
||||
* THE OPEN SOURCE SOFTWARE IN THIS PRODUCT IS DISTRIBUTED IN THE HOPE THAT IT WILL BE USEFUL,
|
||||
* BUT WITHOUT ANY WARRANTY, WITHOUT EVEN THE IMPLIED WARRANTY OF MERCHANTABILITY OR FITNESS FOR
|
||||
* A PARTICULAR PURPOSE. SEE THE APPLICABLE LICENSES FOR MORE DETAILS.
|
||||
*
|
||||
*/
|
||||
|
||||
export const impressionTheme = {}
|
||||
|
|
@ -1,4 +0,0 @@
|
|||
{
|
||||
"ti-base-color-brand-6": "#5e7ce0",
|
||||
"ti-base-color-common-7": "#252b3a"
|
||||
}
|
||||
|
|
@ -1,15 +0,0 @@
|
|||
interface TinyTheme {
|
||||
id: string
|
||||
name: string
|
||||
cnName: string
|
||||
data: object
|
||||
}
|
||||
|
||||
declare var tinySmbTheme: TinyTheme
|
||||
declare var tinyDeepTheme: TinyTheme
|
||||
declare var tinyGalaxyTheme: TinyTheme
|
||||
declare var tinyAuroraTheme: TinyTheme
|
||||
declare var tinyInfinityTheme: TinyTheme
|
||||
declare var tinyImpressionTheme: TinyTheme
|
||||
|
||||
export { tinySmbTheme, tinyDeepTheme, tinyGalaxyTheme, tinyInfinityTheme, tinyAuroraTheme, tinyImpressionTheme }
|
||||
|
|
@ -1,60 +0,0 @@
|
|||
/**
|
||||
* Copyright (c) 2022 - present TinyVue Authors.
|
||||
* Copyright (c) 2022 - present Huawei Cloud Computing Technologies Co., Ltd.
|
||||
*
|
||||
* Use of this source code is governed by an MIT-style license.
|
||||
*
|
||||
* THE OPEN SOURCE SOFTWARE IN THIS PRODUCT IS DISTRIBUTED IN THE HOPE THAT IT WILL BE USEFUL,
|
||||
* BUT WITHOUT ANY WARRANTY, WITHOUT EVEN THE IMPLIED WARRANTY OF MERCHANTABILITY OR FITNESS FOR
|
||||
* A PARTICULAR PURPOSE. SEE THE APPLICABLE LICENSES FOR MORE DETAILS.
|
||||
*
|
||||
*/
|
||||
|
||||
import { impressionTheme } from './impression-theme'
|
||||
import { tinyBaseInfinityTheme, infinityConcat } from './infinity-theme'
|
||||
import { deepTheme } from './deep-theme'
|
||||
import { galaxyTheme } from './galaxy-theme'
|
||||
import { tinyBaseAuroraTheme, concatTheme as auroraConcat } from './aurora-theme'
|
||||
import { tinyBaseSmbTheme, concatTheme as smbConcat } from './smb-theme'
|
||||
|
||||
export const tinyImpressionTheme = {
|
||||
id: 'tiny-impression-theme',
|
||||
name: 'Impression',
|
||||
cnName: '印象',
|
||||
data: impressionTheme
|
||||
}
|
||||
|
||||
export const tinyInfinityTheme = {
|
||||
id: 'tiny-infinity-theme',
|
||||
name: 'Infinity',
|
||||
cnName: '无限',
|
||||
data: { ...tinyBaseInfinityTheme, ...infinityConcat }
|
||||
}
|
||||
|
||||
export const tinyDeepTheme = {
|
||||
id: 'tiny-deep-theme',
|
||||
name: 'Deep',
|
||||
cnName: '深邃夜空',
|
||||
data: deepTheme
|
||||
}
|
||||
|
||||
export const tinyGalaxyTheme = {
|
||||
id: 'tiny-galaxy-theme',
|
||||
name: 'Galaxy',
|
||||
cnName: '追光',
|
||||
data: galaxyTheme
|
||||
}
|
||||
|
||||
export const tinyAuroraTheme = {
|
||||
id: 'tiny-aurora-theme',
|
||||
name: 'Aurora',
|
||||
cnName: 'Aurora',
|
||||
data: { ...tinyBaseAuroraTheme, ...auroraConcat }
|
||||
}
|
||||
|
||||
export const tinySmbTheme = {
|
||||
id: 'tiny-smb-theme',
|
||||
name: 'SMB',
|
||||
cnName: 'SMB',
|
||||
data: { ...tinyBaseSmbTheme, ...smbConcat }
|
||||
}
|
||||
|
|
@ -1,381 +0,0 @@
|
|||
/**
|
||||
* Copyright (c) 2022 - present TinyVue Authors.
|
||||
* Copyright (c) 2022 - present Huawei Cloud Computing Technologies Co., Ltd.
|
||||
*
|
||||
* Use of this source code is governed by an MIT-style license.
|
||||
*
|
||||
* THE OPEN SOURCE SOFTWARE IN THIS PRODUCT IS DISTRIBUTED IN THE HOPE THAT IT WILL BE USEFUL,
|
||||
* BUT WITHOUT ANY WARRANTY, WITHOUT EVEN THE IMPLIED WARRANTY OF MERCHANTABILITY OR FITNESS FOR
|
||||
* A PARTICULAR PURPOSE. SEE THE APPLICABLE LICENSES FOR MORE DETAILS.
|
||||
*
|
||||
*/
|
||||
|
||||
export const infinityConcat = {
|
||||
'ti-button-size-normal-height': 'var(--ti-common-space-8x)',
|
||||
'ti-button-normal-background-color': '#ebebeb',
|
||||
'ti-button-normal-border-color': 'var(--ti-base-color-transparent)',
|
||||
'ti-button-normal-text-color': 'var(--ti-base-color-common-7)',
|
||||
'ti-button-padding-vertical': '0',
|
||||
'ti-button-normal-hover-bg-color': '#d1d1d1',
|
||||
'ti-button-normal-hover-border-color': 'var(--ti-base-color-transparent)',
|
||||
'ti-button-normal-hover-text-color': 'var(--ti-base-color-common-7)',
|
||||
'ti-button-text-color': '#526ecc',
|
||||
'ti-button-text-color-hover': 'var(--ti-base-color-brand-8)',
|
||||
'ti-autocomplete-suggestion-border-color': '#fff',
|
||||
'ti-autocomplete-suggestion-bg-color': '#fff',
|
||||
'ti-autocomplete-li-hover-bg-color': 'var(--ti-common-color-hover-background)',
|
||||
'ti-autocomplete-li-select-bg-color': '#f2f5fc',
|
||||
'ti-autocomplete-li-height': '36px',
|
||||
'ti-checkbox-border-color': '#d7d8da',
|
||||
'ti-checkbox-border-color-hover': '#252b3a',
|
||||
'ti-checkbox-icon-height': '6px',
|
||||
'ti-checkbox-icon-width': 'var(--ti-common-size-3)',
|
||||
'ti-checkbox-icon-margin-top': '2px',
|
||||
'ti-picker-panel-border-color': '#fff',
|
||||
'ti-radio-inner-size': '10px',
|
||||
'ti-radio-bordered-checked-hover-border-color': 'var(--ti-base-color-brand-8)',
|
||||
'ti-radio-bordered-border-color': '#d7d8da',
|
||||
'ti-radio-input-disabled-bg-color': '#f5f5f5',
|
||||
'ti-switch-off-bg-color': '#d7d8da',
|
||||
'ti-link-default-text-color': 'var(--ti-base-color-brand-7)',
|
||||
'ti-link-default-hover-text-color': 'var(--ti-base-color-brand-8)',
|
||||
'ti-numeric-input-normal-height': 'var(--ti-common-size-height-normal)',
|
||||
'ti-numeric-input-width': '140px',
|
||||
'ti-slider-height': '5px',
|
||||
'ti-slider-range-height': '5px',
|
||||
'ti-slider-handle-border-radius': '50%',
|
||||
'ti-slider-handle-width': '14px',
|
||||
'ti-slider-handle-height': '14px',
|
||||
'ti-slider-range-top': '0',
|
||||
'ti-slider-handle-top': '0',
|
||||
'ti-slider-border-radius': '100px',
|
||||
'ti-slider-range-border-radius': '100px',
|
||||
'ti-slider-handle-border-weight': '2px',
|
||||
'ti-slider-range-hover-bg-color': '#7693f5',
|
||||
'ti-slider-handle-icon-display': 'none',
|
||||
'ti-slider-tips-margin-left': '0',
|
||||
'ti-slider-handle-transform': 'scale(1.3)',
|
||||
'ti-slider-range-margin-top': '0',
|
||||
'ti-slider-handle-margin-top': '-5px',
|
||||
'ti-slider-handle-margin-horizontal': '-8px',
|
||||
'ti-slider-handle-margin-bottom': '0',
|
||||
'ti-slider-margin-vertical': '-8px',
|
||||
'ti-slider-margin-right': '0',
|
||||
'ti-slider-margin-left': '-4px',
|
||||
'ti-time-panel-border-color': 'var(--ti-common-color-transparent)',
|
||||
'ti-time-panel-box-shadow': 'var(--ti-common-shadow-2-down)',
|
||||
'ti-time-spinner-item-font-weight': 'normal',
|
||||
'ti-time-panel-content-split-line-display': 'none',
|
||||
'ti-time-spinner-item-bg-color': '#f2f5fc',
|
||||
'ti-time-spinner-list-border-color': 'var(--ti-common-color-line-dividing)',
|
||||
'ti-time-panel-btn-cancel-display': 'none',
|
||||
'ti-time-panel-btn-confirm-text-color': 'var(--ti-common-color-info-normal)',
|
||||
'ti-time-panel-btn-bg-color': '#EBEBEB',
|
||||
'ti-time-panel-btn-padding-vertical': '0',
|
||||
'ti-time-panel-btn-padding-horizontal': '12px',
|
||||
'ti-time-panel-btn-height': '24px',
|
||||
'ti-time-panel-btn-min-width': '56px',
|
||||
'ti-time-panel-btn-font-weight': 'normal',
|
||||
'ti-time-panel-btn-confirm-hover-bg-color': 'var(--ti-button-normal-hover-bg-color)',
|
||||
'ti-tree-node-content-current-bg-color': 'var(--ti-common-color-selected-background)',
|
||||
'ti-tree-node-content-hover-bg-color': 'var(--ti-common-color-hover-background)',
|
||||
// tabs
|
||||
'tv-Tabs-header-font-active-border-color': 'var(--ti-base-color-common-7)',
|
||||
'tv-Tabs-header-text-color': 'var(--ti-base-color-common-7)',
|
||||
'tv-Tabs-header-font-normal-text-color': '#71757f',
|
||||
'tv-Tabs-item-margin-right': 'var(--ti-common-space-8x)',
|
||||
'tv-Tabs-item-padding-horizontal': 'var(--ti-common-space-4x)',
|
||||
'tv-Tabs-item-vertical-padding-horizontal': 'var(--ti-common-space-5x)',
|
||||
'tv-Tabs-item-active-border-weight': '2px',
|
||||
'tv-Tabs-item-active-border-style': 'solid',
|
||||
'tv-Tabs-item-active-border-color': 'var(--tv-Tabs-header-font-active-border-color)',
|
||||
'tv-Tabs-item-bottom-border-weight': '1px',
|
||||
'tv-Tabs-item-bottom-border-style': 'solid',
|
||||
'tv-Tabs-item-bottom-border-color': '#f2f2f3',
|
||||
'tv-Tabs-item-card-active-bg-color': '#f7f7f9',
|
||||
'tv-Tabs-icon-close-default-bg-color': '#d7d8da',
|
||||
'tv-Tabs-icon-close-hover-bg-color': 'var(--ti-base-color-common-7)',
|
||||
'tv-Tabs-icon-close-default-text-color': 'var(--ti-base-color-white)',
|
||||
'tv-Tabs-icon-close-hover-text-color': 'var(--ti-base-color-white)',
|
||||
'tv-Tabs-icon-size-close': '12px',
|
||||
'tv-Tabs-icon-close-margin-vertical': '0',
|
||||
'tv-Tabs-icon-close-margin-right': '0',
|
||||
'tv-Tabs-icon-close-margin-left': 'var(--ti-common-space-3x)',
|
||||
// popover
|
||||
'ti-popover-box-shadow': '0 8px 16px 0 rgba(37,43,58,.2)',
|
||||
'ti-popover-text-color': '#dfe1e6',
|
||||
'ti-popover-bg-color': '#464d6e',
|
||||
'ti-popover-border-color': 'var(--ti-common-color-transparent)',
|
||||
'ti-popover-title-text-color': '#dfe1e6',
|
||||
'ti-popover-arrow-border-color': 'var(--ti-popover-bg-color)',
|
||||
'ti-popover-placement-arrow-after-border-color': 'var(--ti-popover-arrow-border-color)',
|
||||
'ti-popover-padding-vertical': '8px',
|
||||
'ti-popover-padding-horizontal': '14px',
|
||||
// tooltip
|
||||
'ti-tooltip-box-shadow': '0 8px 16px 0 rgba(37,43,58,.2)',
|
||||
'ti-tooltip-popper-border-color': '#464d6e',
|
||||
'ti-tooltip-popper-dark-bg-color': '#464d6e',
|
||||
'ti-tooltip-popper-light-text-color': '#464d6e',
|
||||
'ti-tooltip-popper-light-border-color': '#464d6e',
|
||||
'ti-tooltip-padding-vertical': '8px',
|
||||
'ti-tooltip-padding-horizontal': '14px',
|
||||
'ti-tooltip-color': '#dfe1e6',
|
||||
'ti-tooltip-popper-dark-text-color': '#dfe1e6',
|
||||
|
||||
'ti-dropdown-menu-padding-vertical': '12px',
|
||||
'ti-dropdown-menu-padding-horizontal': '12px',
|
||||
'ti-dropdown-menu-box-shadow': 'var(--ti-common-shadow-2-down)',
|
||||
'ti-dropdown-menu-margin-vertical': '8px',
|
||||
'ti-dropdown-item-height': '36px',
|
||||
'ti-dropdown-item-padding-vertical': '0',
|
||||
'ti-dropdown-item-padding-horizontal': '12px',
|
||||
'ti-dropdown-item-hover-bg-color': '#f2f2f3',
|
||||
'ti-dropdown-item-active-bg-color': 'var(--ti-dropdown-item-hover-bg-color)',
|
||||
'ti-dropdown-item-text-color': '#252b3a',
|
||||
'ti-dropdown-item-hover-text-color': 'var(--ti-dropdown-item-text-color)',
|
||||
'ti-dropdown-item-active-text-color': 'var(--ti-dropdown-item-text-color)',
|
||||
'ti-dropdown-item-border-radius': 'var(--ti-common-border-radius-normal)',
|
||||
'ti-dropdown-item-disabled-text-color': '#cfd0d3',
|
||||
'ti-dropdown-item-max-width': '100%',
|
||||
'ti-split-trigger-bg-color': '#f2f2f3',
|
||||
'ti-split-trigger-bar-bg-color': 'var(--ti-split-trigger-bg-color)',
|
||||
'ti-split-trigger-hover-bg-color': '#7693f5',
|
||||
'ti-split-trigger-bar-hover-bg-color': 'var(--ti-split-trigger-hover-bg-color)',
|
||||
'ti-split-trigger-size': '2px',
|
||||
'ti-split-trigger-bar-margin-left': '2px',
|
||||
'ti-split-trigger-bar-margin-top': '2px',
|
||||
'ti-split-trigger-con-col-cursor': 'col-resize',
|
||||
'ti-split-trigger-con-row-cursor': 'row-resize',
|
||||
'ti-picker-panel-box-shadow': 'var(--ti-common-shadow-2-down)',
|
||||
'ti-date-picker-width': '249px',
|
||||
'ti-date-picker-font-size': '12px',
|
||||
'ti-date-table-td-today-border-color': 'var(--ti-common-color-transparent)',
|
||||
'ti-date-table-td-today-text-color': 'var(--ti-base-color-brand-6)',
|
||||
'ti-date-picker-current-border-radius': 'var(--ti-common-border-radius-normal)',
|
||||
'ti-date-picker-hover-bg-color': 'var(--ti-common-color-selected-background)',
|
||||
'ti-date-table-td-width': '30px',
|
||||
'ti-date-table-td-height': '22px',
|
||||
'ti-date-table-td-padding-vertical': '0',
|
||||
'ti-date-table-td-padding-horizontal': '4px',
|
||||
'ti-date-table-td-span-width': '22px',
|
||||
'ti-date-table-td-span-height': '22px',
|
||||
'ti-date-editor-input-icon-color-fill': '#d7d8da',
|
||||
// grid
|
||||
'ti-grid-header-background-color': '#fff',
|
||||
'ti-grid-header-column-height': '42px',
|
||||
'ti-grid-icon-fill-hover-bg-color': '#252b3a',
|
||||
// modal
|
||||
'ti-modal-box-width': '346px',
|
||||
'ti-modal-header-padding-top': '20px',
|
||||
'ti-modal-header-padding-horizontal': '20px',
|
||||
'ti-modal-header-padding-bottom': '0',
|
||||
'ti-modal-close-btn-font-size': '32px',
|
||||
'ti-modal-body-padding-top': '20px',
|
||||
'ti-modal-body-padding-horizontal': '20px',
|
||||
'ti-modal-body-padding-bottom': '0',
|
||||
'ti-modal-footer-padding-top': '18px',
|
||||
'ti-modal-footer-padding-horizontal': '32px',
|
||||
'ti-modal-footer-padding-bottom': '20px',
|
||||
'ti-modal-close-btn-top': '18px',
|
||||
'ti-modal-close-btn-scale': 'scale(1)',
|
||||
'ti-modal-btn-text-color': '#71757f',
|
||||
'ti-modal-close-btn-background-color-hover': '#ebebeb',
|
||||
'ti-modal-footer-default-display-button': 'none',
|
||||
'ti-modal-box-shadow': '0 12px 24px 0 rgba(37,43,58,.2)',
|
||||
'ti-modal-footer-btn-border-radius': '4px',
|
||||
'ti-modal-box-border-radius': '8px',
|
||||
'ti-modal-close-btn-padding-horizontal-vertical': '5px',
|
||||
// pager
|
||||
'ti-pager-input-height': '26px',
|
||||
'ti-pager-normal-text-color': '#71757f',
|
||||
'ti-pager-poplist-item-padding-vertical': '0',
|
||||
'ti-pager-poplist-item-padding-horizontal': '10px',
|
||||
'ti-pager-poplist-item-unchecked-box-shadow': ' 0 1px 3px 0 rgba(37, 43, 58, 0.1)',
|
||||
'ti-pager-poplist-item-hover-bg-color': 'var(--ti-common-color-transparent)',
|
||||
'ti-pager-poplist-item-hover-border-color': 'var(--ti-common-color-line-dividing)',
|
||||
'ti-pager-poplist-item-hover-text-color': 'var(--ti-common-color-info-normal)',
|
||||
// alert
|
||||
'ti-alert-icon-font-size': 'var(--ti-common-font-size-2)',
|
||||
'ti-alert-icon-margin-top': 'var(--ti-common-size-3)',
|
||||
'ti-alert-close-font-size': 'var(--ti-common-font-size-2)',
|
||||
'ti-alert-close-position-top': 'var(--ti-common-size-3x)',
|
||||
'ti-alert-normal-padding-top': 'calc(var(--ti-common-size-3) * 3)',
|
||||
'ti-alert-normal-padding-bottom': 'calc(var(--ti-common-size-3) * 3)',
|
||||
'ti-alert-description-line-height': 'var(--ti-common-line-height-4)',
|
||||
'ti-alert-success-bg-color': 'var(--ti-common-color-success-bg)',
|
||||
'ti-alert-description-font-size': 'var(--ti-common-font-size-1)',
|
||||
'ti-alert-success-border-color': 'var(--ti-common-color-transparent)',
|
||||
'ti-alert-warning-border-color': 'var(--ti-common-color-transparent)',
|
||||
'ti-alert-simple-border-color': 'var(--ti-common-color-transparent)',
|
||||
'ti-alert-info-border-color': 'var(--ti-common-color-transparent)',
|
||||
'ti-alert-error-border-color': 'var(--ti-common-color-transparent)',
|
||||
'ti-alert-info-bg-color': 'var(--ti-common-color-bg-light-normal)',
|
||||
'ti-alert-warning-bg-color': 'var(--ti-common-color-warn-bg)',
|
||||
'ti-alert-error-bg-color': 'var(--ti-common-color-error-bg)',
|
||||
'ti-alert-info-icon-color': 'var(--ti-common-color-primary-normal)',
|
||||
'ti-alert-warning-icon-color': 'var(--ti-common-color-warn)',
|
||||
'ti-alert-error-icon-color': 'var(--ti-common-color-error)',
|
||||
'ti-alert-success-icon-color': 'var(--ti-common-color-success)',
|
||||
// steps
|
||||
'tv-Steps-icon-size': '24px',
|
||||
'tv-Steps-node-done-bg-color': 'var(--ti-common-color-success-normal)',
|
||||
'tv-Steps-node-done-border-color': 'var(--ti-common-color-success-normal)',
|
||||
'tv-Steps-done-icon-fill-color': '#fff',
|
||||
'tv-Steps-line-active-bg-color': 'var(--ti-common-color-border)',
|
||||
'tv-Steps-line-height': '1px',
|
||||
'tv-Steps-done-text-color': 'var(--ti-common-color-success-normal)',
|
||||
// tag
|
||||
'ti-tag-border-radius': 'var(--ti-common-border-radius-1)',
|
||||
'ti-tag-height': 'var(--ti-common-size-5x)',
|
||||
'ti-tag-close-font-size': 'var(--ti-common-font-size-base)',
|
||||
// transfer
|
||||
'ti-transfer-panel-width': '300px',
|
||||
'ti-transfer-header-bg-color': '#fff',
|
||||
'ti-transfer-header-border-color': 'var(--ti-common-color-line-dividing)',
|
||||
'ti-transfer-panel-body-height': '320px',
|
||||
'ti-transfer-panel-body-filter-height': '276px',
|
||||
'ti-transfer-panel-item-height': '36px',
|
||||
'ti-transfer-header-span-text-color': '#71757f',
|
||||
'ti-transfer-button-border-radius': '100%',
|
||||
'ti-transfer-button-disabled-bg-color': 'var(--ti-common-color-bg-disabled)',
|
||||
// badge
|
||||
'ti-badge-size': 'var(--ti-common-size-4x)',
|
||||
'ti-badge-font-weight': 'var(--ti-common-font-weight-4)',
|
||||
'ti-badge-border-radius': '100px',
|
||||
// carousel
|
||||
'ti-carousel-arrow-hover-bg-color': 'ti-common-color-selected-background',
|
||||
'ti-carousel-arrow-bg-color': 'rgba(255,255,255,0.8)',
|
||||
'ti-carousel-arrow-box-shadow': '0 8px 16px 0 rgba(37,43,58,.1)',
|
||||
'ti-carousel-arrow-active-text-color': 'var(--ti-base-color-common-7)',
|
||||
'ti-carousel-arrow-width': 'var(--ti-common-size-height-normal)',
|
||||
'ti-carousel-arrow-height': 'var(--ti-common-size-height-normal)',
|
||||
'ti-carousel-indicators-bg-color': 'none',
|
||||
'ti-carousel-indicator-button-bg-color': '#71757f',
|
||||
'ti-carousel-indicator-button-width': '6px',
|
||||
'ti-carousel-indicator-button-height': '6px',
|
||||
'ti-carousel-indicator-margin-right': 'var(--ti-common-size-2x)',
|
||||
'ti-carousel-indicator-active-text-color': 'var(--ti-common-color-info-normal)',
|
||||
'ti-carousel-indicator-active-border-radius': 'var(--ti-common-border-radius-1)',
|
||||
'ti-carousel-indicator-active-width': 'var(--ti-common-size-6x)',
|
||||
'ti-carousel-hover-opacity': '1',
|
||||
'ti-carousel-indicator-active-transition': 'all 0.1s cubic-bezier(0.645,0.045,0.355,1)',
|
||||
'ti-carousel-indicator-active-background-color': '#71757f',
|
||||
'ti-carousel-indicator-active-button-width': 'var(--ti-common-size-6x)',
|
||||
'ti-carousel-indicator-padding-vertical': '0',
|
||||
'ti-carousel-indicator-padding-horizontal': '0',
|
||||
'ti-carousel-indicator-active-transition-property': 'width',
|
||||
// dialog-box
|
||||
'ti-dialogbox-border-radius': 'var(--ti-common-border-radius-2)',
|
||||
'ti-dialogbox-head-padding-top': '20px',
|
||||
'ti-dialogbox-head-padding-horizontal': '20px',
|
||||
'ti-dialogbox-head-padding-bottom': '0',
|
||||
'ti-dialogbox-btn-background-color-hover': '#ebebeb',
|
||||
'ti-dialogbox-head-font-icon-size': '20px',
|
||||
'ti-dialogbox-close-icon-color': '#71757f',
|
||||
'ti-dialogbox-close-icon-color-hover': '#71757f',
|
||||
'ti-dialogbox-box-body-padding-vertical': '20px',
|
||||
'ti-dialogbox-box-body-padding-horizontal': '20px',
|
||||
'ti-dialogbox-box-body-margin-bottom': '0',
|
||||
'ti-dialogbox-box-shadow': '0 12px 24px 0 rgba(37,43,58,.2)',
|
||||
// notify
|
||||
'ti-notify-max-width': '280px',
|
||||
'ti-notify-bg-color': '#464d6e',
|
||||
'ti-notify-text-color': 'var(--ti-base-color-common-1)',
|
||||
'ti-notify-info-bg-color': 'var(--ti-notify-bg-color)',
|
||||
'ti-notify-warning-bg-color': 'var(--ti-notify-bg-color)',
|
||||
'ti-notify-error-bg-color': 'var(--ti-notify-bg-color)',
|
||||
'ti-notify-success-bg-color': 'var(--ti-notify-bg-color)',
|
||||
'ti-notify-close-icon-color': 'var(--ti-base-color-common-1)',
|
||||
'ti-notify-title-text-color': 'var(--ti-base-color-common-1)',
|
||||
'ti-notify-title-margin-top': '0',
|
||||
'ti-notify-title-margin-horizontal': '0',
|
||||
'ti-notify-title-margin-bottom': '8px',
|
||||
'ti-notify-title-height': '25px',
|
||||
'ti-notify-title-line-height': '25px',
|
||||
'ti-notify-title-font-size': 'var(--ti-common-font-size-1)',
|
||||
'ti-notify-content-font-size': 'var(--ti-common-font-size-1)',
|
||||
'ti-notify-icon-size': 'var(--ti-common-font-size-2)',
|
||||
'ti-notify-message-margin-vertical': '6px',
|
||||
'ti-notify-message-margin-right': 0,
|
||||
'ti-notify-message-margin-left': 0,
|
||||
'ti-notify-border-radius': 'var(--ti-common-border-radius-1)',
|
||||
// image-preview
|
||||
'ti-image-viewer-close-bg-color': 'rgba(255,255,255,0.8)',
|
||||
'ti-image-viewer-text-color': '#71757f',
|
||||
'ti-image-viewer-close-top': '55px',
|
||||
'ti-image-viewer-close-right': '20px',
|
||||
'ti-image-viewer-close-width': 'var(--ti-common-size-9x)',
|
||||
'ti-image-viewer-close-height': 'var(--ti-common-size-9x)',
|
||||
'ti-image-viewer-close-font-size': '18px',
|
||||
'ti-image-viewer-actions-width': '100%',
|
||||
'ti-image-viewer-actions-height': '50px',
|
||||
'ti-image-viewer-actions-bottom': '0',
|
||||
'ti-image-viewer-actions-border-radius': 'none',
|
||||
'ti-image-viewer-actions-inner-justify-content': 'center',
|
||||
'ti-image-viewer-actions-inner-font-size': '18px',
|
||||
'ti-image-viewer-actions-inner-text-color': '#71757f',
|
||||
'ti-image-viewer-next-width': '36px',
|
||||
'ti-image-viewer-next-height': '36px',
|
||||
'ti-image-viewer-mask-wrap-bg-color': 'rgba(37,43,58,.2)',
|
||||
'ti-image-viewer-close-bg-color-hover': 'var(--ti-common-color-selected-background)',
|
||||
'ti-image-viewer-btn-opacity': '1',
|
||||
'ti-image-viewer-mask-bg-color': 'var(--ti-common-color-transparent)',
|
||||
// input
|
||||
'ti-input-border-radius': 'var(--ti-common-border-radius-1)',
|
||||
'ti-input-hover-border-color': 'var(--ti-common-color-border-hover)',
|
||||
'ti-input-active-border-color': 'var(--ti-base-color-brand-7)',
|
||||
'ti-input-height': '32px',
|
||||
'ti-input-mini-height': '24px',
|
||||
'ti-input-small-height': '32px',
|
||||
'ti-input-medium-height': '40px',
|
||||
// cascader
|
||||
'ti-cascader-width': '300px',
|
||||
'ti-cascader-medium-line-height': 'var(--ti-input-medium-height)',
|
||||
'ti-cascader-small-line-height': 'var(--ti-input-small-height)',
|
||||
'ti-cascader-mini-line-height': 'var(--ti-input-mini-height)',
|
||||
'ti-cascader-menu-list-padding-vertical': 'var(--ti-common-space-3x)',
|
||||
'ti-cascader-menu-list-padding-horizontal': 'var(--ti-common-space-3x)',
|
||||
'ti-cascader-panel-node-height': '36px',
|
||||
'ti-cascader-node-selectable-hover-bg-color': '#f2f2f3',
|
||||
'ti-cascader-node-selectable-hover-text-color': 'var(--ti-base-color-brand-7)',
|
||||
'ti-cascader-node-disabled-text-color': '#cfd0d3',
|
||||
'ti-cascader-node-disabled-bg-color': '#f5f5f5',
|
||||
'ti-cascader-node-icon-color': 'var(--ti-base-color-common-7)',
|
||||
'ti-cascader-panel-node-label-padding-vertical': '0',
|
||||
'ti-cascader-panel-node-label-padding-right': '30px',
|
||||
'ti-cascader-panel-node-label-padding-left': '12px',
|
||||
'ti-cascader-node-prefix-display': 'none',
|
||||
'ti-cascader-node-label-padding-vertical': 0,
|
||||
'ti-cascader-node-label-padding-horizontal': 0,
|
||||
'ti-cascader-dropdown-box-shadow': '0 4px 8px 0 rgba(37, 43, 58, 0.2)',
|
||||
'ti-cascader-dropdown-border-color': 'var(--ti-cascader-dropdown-bg-color)',
|
||||
'ti-cascader-menu-border-color': 'var(--ti-common-color-hover-background)',
|
||||
'ti-cascader-node-hover-bg-color': 'var(--ti-common-color-hover-background)',
|
||||
'ti-cascader-menu-width': '200px',
|
||||
'ti-cascader-panel-node-margin-top': 'var(--ti-common-space-base)',
|
||||
'ti-cascader-tag-bg-color': 'var(--ti-base-color-brand-2)',
|
||||
'ti-tag-info-text-color': '#71757f',
|
||||
'ti-cascader-hover-border-color': '#71757f',
|
||||
'ti-cascader-focus-border-color': 'var(--ti-base-color-brand-6)',
|
||||
'ti-cascader-node-selectable-text-color': 'var(--ti-base-color-brand-7)',
|
||||
'ti-cascader-node-hover-text-color': 'var(--ti-base-color-brand-7)',
|
||||
// select
|
||||
'ti-select-input-caret-icon-color': 'var(--ti-base-color-common-5)',
|
||||
'ti-select-input-caret-hover-icon-color': 'var(--ti-base-color-common-7)',
|
||||
// option
|
||||
'ti-select-dropdown-list-padding-top': 'var(--ti-common-space-3x)',
|
||||
'ti-select-dropdown-list-padding-horizontal': 'var(--ti-common-space-3x)',
|
||||
'ti-select-dropdown-list-padding-bottom': 'var(--ti-common-space-3x)',
|
||||
'ti-select-dropdown-border-color': 'var(--ti-base-color-white)',
|
||||
'ti-option-padding-vertical': '0',
|
||||
'ti-option-padding-horizontal': 'var(--ti-common-space-3x)',
|
||||
'ti-option-margin-top': 'var(--ti-common-space-base)',
|
||||
'ti-option-height': '36px',
|
||||
'ti-option-selected-text-color': 'var(--ti-common-color-info-normal)',
|
||||
'ti-option-selected-bg-color': 'var(--ti-base-color-brand-1)',
|
||||
// form-item
|
||||
'ti-form-item-error-text-color': 'var(--ti-base-color-error-3)',
|
||||
'ti-form-item-error-bg-color': '#ffd5d4',
|
||||
// color-select-panel
|
||||
'ti-color-select-panel-btn-margin': '8px'
|
||||
}
|
||||
|
|
@ -1,150 +0,0 @@
|
|||
{
|
||||
"devui-global-bg": "#f7f7f9",
|
||||
"devui-glass-morphism-bg": "rgba(247,247,249,0.9)",
|
||||
"devui-global-bg-normal": "#ffffff",
|
||||
"devui-base-bg": "#ffffff",
|
||||
"devui-base-bg-dark": "#252b3a",
|
||||
"devui-brand": "#5e7ce0",
|
||||
"devui-brand-foil": "#f2f2f3",
|
||||
"devui-brand-hover": "#7693f5",
|
||||
"devui-brand-active": "#526ecc",
|
||||
"devui-brand-active-focus": "#344899",
|
||||
"devui-contrast": "#c7000b",
|
||||
"devui-text": "#252b3a",
|
||||
"devui-text-weak": "#575d6c",
|
||||
"devui-aide-text": "#71757f",
|
||||
"devui-aide-text-hover": "#252b3a",
|
||||
"devui-aide-text-stress": "#575d6c",
|
||||
"devui-placeholder": "#babbc0",
|
||||
"devui-light-text": "#ffffff",
|
||||
"devui-dark-text": "#252b3a",
|
||||
"devui-link": "#526ecc",
|
||||
"devui-link-active": "#526ecc",
|
||||
"devui-link-light": "#96adfa",
|
||||
"devui-link-light-active": "#beccfa",
|
||||
"devui-line": "#d7d8da",
|
||||
"devui-dividing-line": "#f2f2f3",
|
||||
"devui-block": "#ffffff",
|
||||
"devui-area": "#f5f5f5",
|
||||
"devui-danger": "#f66f6a",
|
||||
"devui-warning": "#fac20a",
|
||||
"devui-waiting": "#beccfa",
|
||||
"devui-success": "#50d4ab",
|
||||
"devui-info": "#5e7ce0",
|
||||
"devui-initial": "#e9edfa",
|
||||
"devui-unavailable": "#f5f5f5",
|
||||
"devui-shadow": "rgba(37, 43, 58, 0.2)",
|
||||
"devui-light-shadow": "rgba(37, 43, 58, 0.1)",
|
||||
"devui-connected-overlay-shadow": "rgba(37, 43, 58, 0.12)",
|
||||
"devui-feedback-overlay-shadow": "rgba(37, 43, 58, 0.16)",
|
||||
"devui-icon-text": "#71757f",
|
||||
"devui-icon-bg": "#ffffff",
|
||||
"devui-icon-fill": "#71757f",
|
||||
"devui-icon-fill-weak": "#babbc0",
|
||||
"devui-icon-fill-hover": "#252b3a",
|
||||
"devui-icon-fill-active": "#252b3a",
|
||||
"devui-icon-fill-active-hover": "#252b3a",
|
||||
"devui-shape-icon-fill": "#d7d8da",
|
||||
"devui-shape-icon-fill-hover": "#babbc0",
|
||||
"devui-shape-icon-fill-active": "#babbc0",
|
||||
"devui-shape-icon-fill-disabled": "#f5f5f5",
|
||||
"devui-form-control-line": "#d7d8da",
|
||||
"devui-form-control-bg": "#ffffff",
|
||||
"devui-form-control-line-hover": "#9b9fa8",
|
||||
"devui-form-control-line-active": "#5e7ce0",
|
||||
"devui-form-control-line-active-hover": "#344899",
|
||||
"devui-list-item-active-bg": "#f2f5fc",
|
||||
"devui-list-item-active-text": "#252b3a",
|
||||
"devui-list-item-active-hover-bg": "#f2f5fc",
|
||||
"devui-list-item-hover-bg": "#f2f2f3",
|
||||
"devui-list-item-hover-text": "#252b3a",
|
||||
"devui-list-item-selected-bg": "#f2f5fc",
|
||||
"devui-list-item-strip-bg": "#f2f5fc",
|
||||
"devui-disabled-bg": "#f5f5f5",
|
||||
"devui-disabled-line": "#dfe1e6",
|
||||
"devui-disabled-text": "#cfd0d3",
|
||||
"devui-primary-disabled": "#beccfa",
|
||||
"devui-icon-fill-active-disabled": "#beccfa",
|
||||
"devui-label-bg": "#e9edfa",
|
||||
"devui-connected-overlay-bg": "#ffffff",
|
||||
"devui-connected-overlay-line": "#526ecc",
|
||||
"devui-fullscreen-overlay-bg": "#ffffff",
|
||||
"devui-feedback-overlay-bg": "#464d6e",
|
||||
"devui-feedback-overlay-text": "#dfe1e6",
|
||||
"devui-embed-search-bg": "#f2f2f3",
|
||||
"devui-embed-search-bg-hover": "#eef0f5",
|
||||
"devui-float-block-shadow": "rgba(94, 124, 224, 0.3)",
|
||||
"devui-highlight-overlay": "rgba(255, 255, 255, 0.8)",
|
||||
"devui-range-item-hover-bg": "#e9edfa",
|
||||
"devui-primary": "#5e7ce0",
|
||||
"devui-primary-hover": "#7693f5",
|
||||
"devui-primary-active": "#344899",
|
||||
"devui-contrast-hover": "#d64a52",
|
||||
"devui-contrast-active": "#b12220",
|
||||
"devui-danger-line": "#f66f6a",
|
||||
"devui-danger-bg": "#ffd5d4",
|
||||
"devui-warning-line": "#fa9841",
|
||||
"devui-warning-bg": "#ffe1c7",
|
||||
"devui-info-line": "#5e7ce0",
|
||||
"devui-info-bg": "#e9edfa",
|
||||
"devui-success-line": "#50d4ab",
|
||||
"devui-success-bg": "#cffcee",
|
||||
"devui-primary-line": "#5e7ce0",
|
||||
"devui-primary-bg": "#f2f5fc",
|
||||
"devui-default-line": "#5e7ce0",
|
||||
"devui-default-bg": "#f7f8fa",
|
||||
"devui-shadow-length-base": "0 1px 4px 0",
|
||||
"devui-shadow-length-slide-left": "-2px 0 8px 0",
|
||||
"devui-shadow-length-slide-right": "2px 0 8px 0",
|
||||
"devui-shadow-length-connected-overlay": "0 4px 8px 0",
|
||||
"devui-shadow-length-hover": "0 8px 16px 0",
|
||||
"devui-shadow-length-feedback-overlay": "0 8px 16px 0",
|
||||
"devui-shadow-length-fullscreen-overlay": "0 12px 24px 0",
|
||||
"devui-border-radius": "4px",
|
||||
"devui-border-radius-feedback": "4px",
|
||||
"devui-border-radius-card": "8px",
|
||||
"devui-border-radius-full": "100px",
|
||||
"devui-font-size": "14px",
|
||||
"devui-font-size-card-title": "16px",
|
||||
"devui-font-size-page-title": "16px",
|
||||
"devui-font-size-modal-title": "18px",
|
||||
"devui-font-size-price": "20px",
|
||||
"devui-font-size-data-overview": "24px",
|
||||
"devui-font-size-icon": "16px",
|
||||
"devui-font-size-sm": "12px",
|
||||
"devui-font-size-md": "14px",
|
||||
"devui-font-size-lg": "14px",
|
||||
"devui-font-title-weight": "bold",
|
||||
"devui-font-content-weight": "normal",
|
||||
"devui-line-height-base": "1.5",
|
||||
"devui-animation-ease-in-smooth": "cubic-bezier(0.645, 0.045, 0.355, 1)",
|
||||
"devui-animation-duration-slow": "300ms",
|
||||
"devui-animation-duration-base": "200ms",
|
||||
"devui-animation-duration-fast": "100ms",
|
||||
"devui-animation-ease-in": "cubic-bezier(0.5, 0, 0.84, 0.25)",
|
||||
"devui-animation-ease-out": "cubic-bezier(0.16, 0.75, 0.5, 1)",
|
||||
"devui-animation-ease-in-out": "cubic-bezier(0.5, 0.05, 0.5, 0.95)",
|
||||
"devui-animation-ease-in-out-smooth": "cubic-bezier(0.645, 0.045, 0.355, 1)",
|
||||
"devui-animation-linear": "cubic-bezier(0, 0, 1, 1)",
|
||||
"devui-z-index-full-page-overlay": "1080",
|
||||
"devui-z-index-pop-up": "1060",
|
||||
"devui-z-index-dropdown": "1052",
|
||||
"devui-z-index-modal": "1050",
|
||||
"devui-z-index-drawer": "1040",
|
||||
"devui-z-index-framework": "1000",
|
||||
|
||||
"devui-btn-sm-padding": "0 12px",
|
||||
"devui-btn-padding": "0 16px",
|
||||
"devui-btn-lg-padding": "0 20px",
|
||||
"devui-btn-common-bg": "#ebebeb",
|
||||
"devui-btn-common-border-color": "transparent",
|
||||
"devui-btn-common-bg-hover": "#d1d1d1",
|
||||
"devui-btn-common-color-hover": "#252b3a",
|
||||
"devui-btn-common-border-color-hover": "transparent",
|
||||
"devui-btn-common-bg-active": "#BDBDBD",
|
||||
"devui-btn-common-color-active": "#252b3a",
|
||||
"devui-btn-common-border-color-active": "transparent",
|
||||
"devui-btn-common-border-disabled": "transparent",
|
||||
"devui-icon-hover-bg": "#ebebeb",
|
||||
"devui-icon-active-bg": "#d1d1d1"
|
||||
}
|
||||
|
|
@ -1,156 +0,0 @@
|
|||
/**
|
||||
* Copyright (c) 2022 - present TinyVue Authors.
|
||||
* Copyright (c) 2022 - present Huawei Cloud Computing Technologies Co., Ltd.
|
||||
*
|
||||
* Use of this source code is governed by an MIT-style license.
|
||||
*
|
||||
* THE OPEN SOURCE SOFTWARE IN THIS PRODUCT IS DISTRIBUTED IN THE HOPE THAT IT WILL BE USEFUL,
|
||||
* BUT WITHOUT ANY WARRANTY, WITHOUT EVEN THE IMPLIED WARRANTY OF MERCHANTABILITY OR FITNESS FOR
|
||||
* A PARTICULAR PURPOSE. SEE THE APPLICABLE LICENSES FOR MORE DETAILS.
|
||||
*
|
||||
*/
|
||||
|
||||
// 基础变量
|
||||
export const tinyBaseInfinityTheme = {
|
||||
'ti-base-color-transparent': 'transparent', // 透明色
|
||||
|
||||
// 品牌主色
|
||||
'ti-base-color-brand-6': '#5e7ce0', // 主色蓝
|
||||
'ti-base-color-brand-2': '#e9edfa', // 品牌色-2
|
||||
|
||||
/* 1.4 功能色 */
|
||||
'ti-base-color-error-3': '#f66f6a', // 错误-3
|
||||
'ti-base-color-error-1': '#ffd5d4', // 错误-1
|
||||
|
||||
'ti-base-color-success-3': '#50d4ab', // 成功-3
|
||||
'ti-base-color-success-1': '#cffcee', // 成功-1
|
||||
|
||||
// 告警色
|
||||
'ti-base-color-warn-4': '#fa9841', // 告警-4
|
||||
'ti-base-color-warn-1': '#ffe1c7', // 告警-1
|
||||
|
||||
'ti-common-border-radius-normal': 'var(--ti-common-border-radius-1)',
|
||||
'ti-common-font-size-base': 'var(--ti-common-font-size-1)',
|
||||
'ti-common-color-line-dividing': '#f2f2f3',
|
||||
'ti-common-color-warning-normal': '#fac20a',
|
||||
'ti-common-color-warning-hover': '#ffd138',
|
||||
'ti-common-color-warning-active': '#ffd138',
|
||||
'ti-common-color-danger-normal': '#c7000b',
|
||||
'ti-common-color-danger-hover': '#d64a52',
|
||||
'ti-common-color-danger-active': '#d64a52',
|
||||
'ti-common-color-success-normal': '#50d4ab',
|
||||
'ti-common-color-success-hover': '#6ddebb',
|
||||
'ti-common-color-success-active': '#6ddebb',
|
||||
'ti-common-color-info-normal': '#252b3a',
|
||||
'ti-common-color-info-hover': '#575d5c',
|
||||
'ti-common-color-info-active': '#575d5c',
|
||||
'ti-common-color-border': '#d7d8da',
|
||||
'ti-base-color-brand-5': '#526ecc',
|
||||
'ti-common-size-height-normal': '32px',
|
||||
'ti-common-shadow-2-down': '0 4px 8px 0 rgba(37,43,58,.2)',
|
||||
'ti-common-color-hover-background': '#f2f2f3',
|
||||
'ti-common-color-selected-background': '#f2f5fc',
|
||||
'ti-common-dropdown-gap': '8px',
|
||||
'ti-common-color-bg-disabled': '#f5f5f5',
|
||||
|
||||
/**
|
||||
* 12.28 尺寸
|
||||
**/
|
||||
'ti-common-size-base': '4px', // 基础尺寸
|
||||
'ti-common-size-2x': 'calc(var(--ti-common-size-base) * 2)', // 尺寸-2
|
||||
'ti-common-size-3x': 'calc(var(--ti-common-size-base) * 3)', // 尺寸-3
|
||||
'ti-common-size-4x': 'calc(var(--ti-common-size-base) * 4)', // 尺寸-4
|
||||
'ti-common-size-5x': 'calc(var(--ti-common-size-base) * 5)', // 尺寸-5
|
||||
'ti-common-size-6x': 'calc(var(--ti-common-size-base) * 6)', // 尺寸-6
|
||||
'ti-common-size-7x': 'calc(var(--ti-common-size-base) * 7)', // 尺寸-7
|
||||
'ti-common-size-8x': 'calc(var(--ti-common-size-base) * 8)', // 尺寸-8
|
||||
'ti-common-size-9x': 'calc(var(--ti-common-size-base) * 9)', // 尺寸-9
|
||||
'ti-common-size-10x': 'calc(var(--ti-common-size-base) * 10)', // 尺寸-10
|
||||
'ti-common-size-11x': 'calc(var(--ti-common-size-base) * 11)', // 尺寸-11
|
||||
'ti-common-size-12x': 'calc(var(--ti-common-size-base) * 12)', // 尺寸-12
|
||||
'ti-common-size-13x': 'calc(var(--ti-common-size-base) * 13)', // 尺寸-13
|
||||
'ti-common-size-14x': 'calc(var(--ti-common-size-base) * 14)', // 尺寸-14
|
||||
'ti-common-size-15x': 'calc(var(--ti-common-size-base) * 15)', // 尺寸-15
|
||||
'ti-common-size-16x': 'calc(var(--ti-common-size-base) * 16)', // 尺寸-16
|
||||
'ti-common-size-17x': 'calc(var(--ti-common-size-base) * 17)', // 尺寸-17
|
||||
'ti-common-size-18x': 'calc(var(--ti-common-size-base) * 18)', // 尺寸-18
|
||||
'ti-common-size-19x': 'calc(var(--ti-common-size-base) * 19)', // 尺寸-19
|
||||
'ti-common-size-20x': 'calc(var(--ti-common-size-base) * 20)', // 尺寸-20
|
||||
'ti-common-size-21x': 'calc(var(--ti-common-size-base) * 21)', // 尺寸-21
|
||||
'ti-common-size-22x': 'calc(var(--ti-common-size-base) * 22)', // 尺寸-22
|
||||
'ti-common-size-23x': 'calc(var(--ti-common-size-base) * 23)', // 尺寸-23
|
||||
'ti-common-size-24x': 'calc(var(--ti-common-size-base) * 24)', // 尺寸-24
|
||||
'ti-common-size-25x': 'calc(var(--ti-common-size-base) * 25)', // 尺寸-25
|
||||
'ti-common-size-26x': 'calc(var(--ti-common-size-base) * 26)', // 尺寸-26
|
||||
'ti-common-size-27x': 'calc(var(--ti-common-size-base) * 27)', // 尺寸-27
|
||||
'ti-common-size-28x': 'calc(var(--ti-common-size-base) * 28)', // 尺寸-28
|
||||
'ti-common-size-29x': 'calc(var(--ti-common-size-base) * 29)', // 尺寸-29
|
||||
'ti-common-size-30x': 'calc(var(--ti-common-size-base) * 30)', // 尺寸-30
|
||||
'ti-common-size-31x': 'calc(var(--ti-common-size-base) * 31)', // 尺寸-31
|
||||
'ti-common-size-32x': 'calc(var(--ti-common-size-base) * 32)', // 尺寸-32
|
||||
'ti-common-size-33x': 'calc(var(--ti-common-size-base) * 33)', // 尺寸-33
|
||||
'ti-common-size-34x': 'calc(var(--ti-common-size-base) * 34)', // 尺寸-34
|
||||
'ti-common-size-35x': 'calc(var(--ti-common-size-base) * 35)', // 尺寸-35
|
||||
'ti-common-size-36x': 'calc(var(--ti-common-size-base) * 36)', // 尺寸-36
|
||||
'ti-common-size-37x': 'calc(var(--ti-common-size-base) * 37)', // 尺寸-37
|
||||
'ti-common-size-38x': 'calc(var(--ti-common-size-base) * 38)', // 尺寸-38
|
||||
'ti-common-size-39x': 'calc(var(--ti-common-size-base) * 39)', // 尺寸-39
|
||||
'ti-common-size-40x': 'calc(var(--ti-common-size-base) * 40)', // 尺寸-40
|
||||
'ti-common-size-41x': 'calc(var(--ti-common-size-base) * 41)', // 尺寸-41
|
||||
'ti-common-size-42x': 'calc(var(--ti-common-size-base) * 42)', // 尺寸-42
|
||||
'ti-common-size-43x': 'calc(var(--ti-common-size-base) * 43)', // 尺寸-43
|
||||
'ti-common-size-44x': 'calc(var(--ti-common-size-base) * 44)', // 尺寸-44
|
||||
'ti-common-size-45x': 'calc(var(--ti-common-size-base) * 45)', // 尺寸-45
|
||||
'ti-common-size-46x': 'calc(var(--ti-common-size-base) * 46)', // 尺寸-46
|
||||
'ti-common-size-47x': 'calc(var(--ti-common-size-base) * 47)', // 尺寸-47
|
||||
'ti-common-size-48x': 'calc(var(--ti-common-size-base) * 48)', // 尺寸-48
|
||||
'ti-common-size-49x': 'calc(var(--ti-common-size-base) * 49)', // 尺寸-49
|
||||
'ti-common-size-50x': 'calc(var(--ti-common-size-base) * 50)', // 尺寸-50
|
||||
|
||||
/* 其他尺寸 */
|
||||
'ti-common-size-0': '0px', // 其他尺寸-1
|
||||
'ti-common-size-auto': 'auto', // 其他尺寸-2
|
||||
'ti-common-size-3': '3px', // 基础尺寸
|
||||
|
||||
/**
|
||||
* 2.12 字号
|
||||
**/
|
||||
'ti-common-font-size-1': '14px', // NewCssVar 标题-小
|
||||
'ti-common-font-size-2': '16px', // NewCssVar 标题-中
|
||||
'ti-common-font-size-3': '18px', // NewCssVar 标题-大
|
||||
'ti-common-font-size-4': '20px', // NewCssVar 字号-4
|
||||
'ti-common-font-size-5': '24px', // NewCssVar 字号-5
|
||||
'ti-common-font-size-6': '32px', // NewCssVar 字号-6
|
||||
'ti-common-font-size-7': '36px', // NewCssVar 字号-7
|
||||
|
||||
// 行高
|
||||
'ti-common-line-height-4': '22px', // NewCssVar
|
||||
|
||||
/**
|
||||
* 2.1 基础色
|
||||
**/
|
||||
'ti-common-color-transparent': 'var(--ti-base-color-transparent)',
|
||||
|
||||
/* 浅底背景状态色 */
|
||||
'ti-common-color-bg-light-normal': 'var(--ti-base-color-brand-2)',
|
||||
|
||||
/**
|
||||
* 2.3 交互类型颜色
|
||||
**/
|
||||
'ti-common-color-primary-normal': 'var(--ti-base-color-brand-6)', // NewCssVar
|
||||
|
||||
/**
|
||||
* 2.2 提示类型颜色
|
||||
* 用于 alert组件、Modal（message）组件、Tag 标签组件、Notify 通知组件涉及功能提示的背景、文字、图标等的颜色使用
|
||||
**/
|
||||
'ti-common-color-error': 'var(--ti-base-color-error-3)', // 错误-图标色/状态图标-危险、错误、失败/深色Tip中的价格文本
|
||||
'ti-common-color-error-bg': 'var(--ti-base-color-error-1)', // 错误-背景色/校验背景色
|
||||
|
||||
'ti-common-color-success': 'var(--ti-base-color-success-3)', // 成功-图标色/状态图标-成功
|
||||
'ti-common-color-success-bg': 'var(--ti-base-color-success-1)', // 成功-背景色
|
||||
|
||||
'ti-common-color-warn': 'var(--ti-base-color-warn-4)', // 告警-图标色/状态图标-警告
|
||||
'ti-common-color-warn-bg': 'var(--ti-base-color-warn-1)' // 告警-背景色
|
||||
}
|
||||
|
||||
export * from './component-vars.js'
|
||||
|
|
@ -1,5 +0,0 @@
|
|||
{
|
||||
"ti-base-color-brand-6": "#5e7ce0",
|
||||
"ti-base-color-common-7": "#252b3a",
|
||||
"ti-button-normal-background-color": "#ebebeb"
|
||||
}
|
||||
|
|
@ -1,461 +0,0 @@
|
|||
export const tinyBaseSmbTheme = {
|
||||
/* 基础色 */
|
||||
|
||||
// 品牌色
|
||||
'ti-base-color-brand': '#191919', // 主色黑/链接颜色
|
||||
'ti-base-color-brand-1': '#595959', // 主色悬浮色、链接悬浮色
|
||||
'ti-base-color-brand-2': '#1476FF', // 文字按钮色、文字按钮悬浮色
|
||||
'ti-base-color-brand-3': '#7693F5', // 深色背景下图标
|
||||
'ti-base-color-brand-4': '#96ADFA', // 深色背景链接色
|
||||
'ti-base-color-brand-5': '#C2C2C2', // 选块悬浮色/页签禁用文字色
|
||||
'ti-base-color-brand-6': '#F5F5F5', // 选块默认色/滑块背景色/分页悬浮色、下拉、列表、悬浮背景、表头背景、下拉菜单、选块选中色
|
||||
'ti-base-color-brand-7': '#B3D6FF', // 开关组件“开”禁用背景色
|
||||
'ti-base-color-brand-8': '#DEECFF', // 日期选择悬浮背景色
|
||||
'ti-base-color-brand-9': '#DBDBDB', // 开关组件“关”禁用背景色
|
||||
|
||||
// 中立色
|
||||
'ti-base-color-common': '#191919', // 正文主色，重要信息、标题颜色、输入类文本颜色、导航栏文字图标
|
||||
'ti-base-color-common-1': '#595959', // 次要信息/图标默认
|
||||
'ti-base-color-common-2': '#808080', // 弱化信息、说明文字
|
||||
'ti-base-color-common-3': '#C2C2C2', // 边框色（如下拉、输入框）/文字禁用/禁用图标
|
||||
'ti-base-color-common-4': '#DBDBDB', // 禁用描边
|
||||
'ti-base-color-common-5': '#F0F0F0', // 白色背景分割线
|
||||
'ti-base-color-common-6': '#DBDBDB', // 灰色背景分割线
|
||||
'ti-base-color-bg': '#F5F5F5', // 通用背景-页面背景色
|
||||
'ti-base-color-bg-1': '#F0F0F0', // 禁用背景/小表格中禁用背景/支付列表中禁用背景、顶部导航下拉悬浮背景色
|
||||
'ti-base-color-bg-2': '#FAFAFA', // 新区域组件-悬浮背景色
|
||||
'ti-base-color-bg-3': '#191919', // 主要按钮-背景色
|
||||
'ti-base-color-bg-4': '#595959', // 主要按钮-hover/Focus背景色
|
||||
'ti-base-color-bg-5': '#FFFFFF', // 顶部导航背景色、 顶部导航下拉背景色
|
||||
'ti-base-color-bg-6': '#F5F5F5', // 标签背景色
|
||||
'ti-base-color-bg-7': '#FFFFFF', // 次要按钮-背景色、次要按钮-hover/Focus/active背景色、输入框背景色
|
||||
|
||||
// 功能色
|
||||
'ti-base-color-success-bg': '#E6F2D5', // 成功-背景色
|
||||
'ti-base-color-success-border': '#E6F2D5', // 成功-边框色
|
||||
'ti-base-color-success': '#5CB300', // 成功-图标色
|
||||
'ti-base-color-success-text': '#5CB300', // 成功-文本色
|
||||
|
||||
'ti-base-color-error-bg': '#FCE3E1', // 错误-背景色/错误校验背景色
|
||||
'ti-base-color-error-border': '#FCE3E1', // 错误-边框色
|
||||
'ti-base-color-error': '#F23030', // 错误-图标色、校验边框色/、悬浮菜单背景色
|
||||
'ti-base-color-error-text': '#F23030', // 错误-文本色/交易金额色
|
||||
|
||||
'ti-base-color-warn-bg': '#FFEBD1', // 告警-背景色
|
||||
'ti-base-color-warn-border': '#FFEBD1', // 告警-边框色
|
||||
'ti-base-color-warn': '#FF8800', // 告警-图标色、深色背景-运营活动文本色
|
||||
'ti-base-color-warn-text': '#FF8800', // 告警-文本色
|
||||
|
||||
'ti-base-color-prompt-bg': '#DEECFF', // 提示-背景色
|
||||
'ti-base-color-prompt-border': '#DEECFF', // 提示-边框色
|
||||
'ti-base-color-prompt': '#1476FF', // 提示-图标色
|
||||
'ti-base-color-prompt-text': '#1476FF', // 提示-文本色
|
||||
|
||||
'ti-base-color-error-icon-from': '#FF41A1',
|
||||
'ti-base-color-error-icon-to': '#FF8A5B',
|
||||
'ti-base-color-warn-icon-from': '#FF5541',
|
||||
'ti-base-color-warn-icon-to': '#FFD347',
|
||||
'ti-base-color-prompt-icon-from': '#7769E8',
|
||||
'ti-base-color-prompt-icon-to': '#58BBFF',
|
||||
'ti-base-color-warn-1': '#FFB700',
|
||||
'ti-base-color-icon-info': '#1476FF',
|
||||
'ti-base-color-data-3': '#6E51E0',
|
||||
'ti-base-color-data-4': '#5CB300',
|
||||
'ti-base-color-data-5': '#FCBE1E',
|
||||
'ti-base-color-data-2': '#0BB8B2', // 新风格专用
|
||||
'ti-base-color-data-6': '#33BCF2', // 新风格专用
|
||||
'ti-base-color-data-7': '#BA53E6', // 新风格专用
|
||||
'ti-base-color-data-8': '#EB4696', // 新风格专用
|
||||
|
||||
/* 场景色 */
|
||||
|
||||
// 功能色
|
||||
'ti-common-color-success-bg': 'var(--ti-base-color-success-bg)',
|
||||
'ti-common-color-success-border': 'var(--ti-base-color-success-border)',
|
||||
'ti-common-color-success': 'var(--ti-base-color-success)',
|
||||
'ti-common-color-text-success': 'var(--ti-base-color-success-text)',
|
||||
'ti-common-color-error-bg': 'var(--ti-base-color-error-bg)',
|
||||
'ti-common-color-error-border': 'var(--ti-base-color-error)',
|
||||
'ti-common-color-error-border-secondary': 'var(--ti-base-color-error-border)',
|
||||
'ti-common-color-error': 'var(--ti-base-color-error)',
|
||||
'ti-common-color-error-text': 'var(--ti-base-color-error-text)',
|
||||
'ti-common-color-warn-bg': 'var(--ti-base-color-warn-bg)',
|
||||
'ti-common-color-warn-border': 'var(--ti-base-color-warn-border)',
|
||||
'ti-common-color-warn': 'var(--ti-base-color-warn)',
|
||||
'ti-common-color-warn-text': 'var(--ti-base-color-warn-text)',
|
||||
'ti-common-color-prompt-bg': 'var(--ti-base-color-prompt-bg)',
|
||||
'ti-common-color-prompt-border': 'var(--ti-base-color-prompt-border)',
|
||||
'ti-common-color-prompt': 'var(--ti-base-color-prompt)',
|
||||
'ti-common-color-prompt-text': 'var(--ti-base-color-prompt-text)',
|
||||
'ti-common-color-warn-secondary': 'var(--ti-base-color-warn-1)',
|
||||
|
||||
// 文本色
|
||||
'ti-common-color-error-icon-from': 'var(--ti-base-color-error-icon-from)',
|
||||
'ti-common-color-error-icon-to': 'var(--ti-base-color-error-icon-to)',
|
||||
'ti-common-color-warn-icon-from': 'var(--ti-base-color-warn-icon-from)',
|
||||
'ti-common-color-warn-icon-to': 'var(--ti-base-color-warn-icon-to)',
|
||||
'ti-common-color-prompt-icon-from': 'var(--ti-base-color-prompt-icon-from)',
|
||||
'ti-common-color-prompt-icon-to': 'var(--ti-base-color-prompt-icon-to)',
|
||||
'ti-common-color-text-primary': 'var(--ti-base-color-common)',
|
||||
'ti-common-color-text-secondary': 'var(--ti-base-color-common-1)',
|
||||
'ti-common-color-text-weaken': 'var(--ti-base-color-common-2)',
|
||||
'ti-common-color-text-disabled': 'var(--ti-base-color-common-3)',
|
||||
'ti-common-color-text-highlight': 'var(--ti-base-color-brand-2)',
|
||||
'ti-common-color-text-link': 'var(--ti-base-color-brand-2)',
|
||||
'ti-common-color-text-link-hover': 'var(--ti-base-color-brand-2)',
|
||||
'ti-common-color-text-white': 'var(--ti-base-color-white)',
|
||||
'ti-common-color-text-darkbg': 'var(--ti-base-color-common-3)',
|
||||
'ti-common-color-text-darkbg-disabled': 'var(--ti-base-color-common-1)',
|
||||
'ti-common-color-text-gray-disabled': 'var(--ti-base-color-brand-3)',
|
||||
'ti-common-color-text-important': 'var(--ti-base-color-common)',
|
||||
'ti-common-color-text-link-darkbg': 'var(--ti-base-color-brand-4)',
|
||||
'ti-common-color-text-link-darkbg-hover': 'var(--ti-base-color-brand-5)',
|
||||
'ti-common-color-text-gray': 'var(--ti-base-color-common)',
|
||||
|
||||
// 图标色
|
||||
'ti-common-color-icon': 'var(--ti-base-color-common)', // 5.12新增
|
||||
'ti-common-color-icon-normal': 'var(--ti-base-color-common-2)', // 5.12修改
|
||||
'ti-common-color-icon-hover': 'var(--ti-base-color-common)', // 5.12修改
|
||||
'ti-common-color-icon-active': 'var(--ti-base-color-common)', // 5.12修改
|
||||
'ti-common-color-icon-disabled': 'var(--ti-base-color-common-3)',
|
||||
'ti-common-color-icon-white': 'var(--ti-base-color-white)',
|
||||
'ti-common-color-icon-graybg-normal': 'var(--ti-base-color-common-2)',
|
||||
'ti-common-color-icon-graybg-hover': 'var(--ti-base-color-common)',
|
||||
'ti-common-color-icon-graybg-active': 'var(--ti-base-color-common)',
|
||||
'ti-common-color-icon-graybg-disabled': 'var(--ti-base-color-common-3)',
|
||||
'ti-common-color-icon-darkbg-normal': 'var(--ti-base-color-common-3)',
|
||||
'ti-common-color-icon-darkbg-hover': 'var(--ti-base-color-brand-3)',
|
||||
'ti-common-color-icon-darkbg-active': 'var(--ti-base-color-brand-3)',
|
||||
'ti-common-color-icon-darkbg-disabled': 'var(--ti-base-color-common-1)',
|
||||
'ti-common-color-icon-info': 'var(--ti-base-color-icon-info)',
|
||||
|
||||
// 线条色
|
||||
'ti-common-color-line-normal': 'var(--ti-base-color-common-3)',
|
||||
'ti-common-color-line-hover': 'var(--ti-base-color-common)',
|
||||
'ti-common-color-line-active': 'var(--ti-base-color-common)',
|
||||
'ti-common-color-line-disabled': 'var(--ti-base-color-common-4)',
|
||||
'ti-common-color-line-dividing': 'var(--ti-base-color-common-5)',
|
||||
'ti-common-color-dash-line-normal': 'var(--ti-base-color-common)',
|
||||
'ti-common-color-dash-line-hover': 'var(--ti-base-color-common)',
|
||||
|
||||
// 背景色
|
||||
'ti-common-color-bg-normal': 'var(--ti-base-color-bg)',
|
||||
'ti-common-color-bg-disabled': 'var(--ti-base-color-bg-1)',
|
||||
'ti-common-color-bg-emphasize': 'var(--ti-base-color-brand)',
|
||||
'ti-common-color-bg-hover': 'var(--ti-base-color-brand-1)',
|
||||
'ti-common-color-bg-gray': 'var(--ti-base-color-bg-2)',
|
||||
'ti-common-color-bg-secondary': 'var(--ti-base-color-common-3)',
|
||||
'ti-common-color-bg-primary': 'var(--ti-base-color-bg-3)',
|
||||
'ti-common-color-bg-primary-hover': 'var(--ti-base-color-bg-4)',
|
||||
'ti-common-color-bg-primary-active': 'var(--ti-base-color-bg-4)',
|
||||
'ti-common-color-bg-minor': 'var(--ti-base-color-bg-7)',
|
||||
'ti-common-color-bg-minor-hover': 'var(--ti-base-color-bg-7)',
|
||||
'ti-common-color-bg-minor-active': 'var(--ti-base-color-bg-7)',
|
||||
'ti-common-color-bg-navigation': 'var(--ti-base-color-bg-5)',
|
||||
'ti-common-color-bg-white-normal': 'var(--ti-base-color-bg-7)',
|
||||
'ti-common-color-bg-white-emphasize': 'var(--ti-base-color-bg-1)',
|
||||
'ti-common-color-bg-light-normal': 'var(--ti-base-color-bg-1)',
|
||||
'ti-common-color-bg-light-emphasize': 'var(--ti-base-color-brand-7)',
|
||||
'ti-common-color-bg-dark-normal': 'var(--ti-base-color-bg-7)',
|
||||
'ti-common-color-bg-dark-emphasize': 'var(--ti-base-color-bg-7)',
|
||||
'ti-common-color-bg-dark-active': 'var(--ti-base-color-bg-7)',
|
||||
'ti-common-color-bg-dark-disabled': 'var(--ti-base-color-common-4)',
|
||||
'ti-common-color-bg-dark-deep': 'var(--ti-base-color-white)',
|
||||
'ti-common-color-bg-dark-select': 'var(--ti-base-color-white)',
|
||||
|
||||
// 补全默认主题变量名，因cfui组件使用到了此变量名，因为需要映射一下
|
||||
'ti-common-bg-primary': 'var(--ti-common-color-bg-primary)',
|
||||
'ti-common-bg-primary-hover': 'var(--ti-common-color-bg-primary-hover)',
|
||||
'ti-common-bg-primary-active': 'var(--ti-common-color-bg-primary-active)',
|
||||
'ti-common-color-bg-6': 'var(--ti-base-color-bg-6)', // smb新增标签背景色
|
||||
|
||||
// 图表色
|
||||
'ti-common-color-data-1': 'var(--ti-base-color-icon-info)',
|
||||
'ti-common-color-data-2': 'var(--ti-base-color-data-2)',
|
||||
'ti-common-color-data-3': 'var(--ti-base-color-data-3)',
|
||||
'ti-common-color-data-4': 'var(--ti-base-color-data-4)',
|
||||
'ti-common-color-data-5': 'var(--ti-base-color-data-5)',
|
||||
'ti-common-color-data-6': 'var(--ti-base-color-data-6)',
|
||||
'ti-common-color-data-7': 'var(--ti-base-color-data-7)',
|
||||
'ti-common-color-data-8': 'var(--ti-base-color-data-8)',
|
||||
|
||||
/* 字号 */
|
||||
'ti-common-font-size-base': '14px', // 正文
|
||||
'ti-common-font-size-0': '12px', // 辅助文本
|
||||
'ti-common-font-size-1': '14px',
|
||||
'ti-common-font-size-2': '16px',
|
||||
'ti-common-font-size-3': '18px',
|
||||
'ti-common-font-size-4': '20px',
|
||||
'ti-common-font-size-5': '24px',
|
||||
'ti-common-font-size-6': '32px',
|
||||
'ti-common-font-size-7': '36px',
|
||||
'ti-common-font-size-8': '40px',
|
||||
'ti-common-font-size-9': '48px',
|
||||
'ti-common-font-size-10': '56px',
|
||||
'ti-common-line-number': '1.5',
|
||||
|
||||
/* 字体 */
|
||||
'ti-common-font-family':
|
||||
'"Helvetica", "Arial", "PingFangSC-Regular", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", "Microsoft JhengHei"',
|
||||
|
||||
/* 间距 */
|
||||
'ti-common-space-base': '4px',
|
||||
'ti-common-space-2x': 'calc(var(--ti-common-space-base) * 2)',
|
||||
'ti-common-space-3x': 'calc(var(--ti-common-space-base) * 3)',
|
||||
'ti-common-space-4x': 'calc(var(--ti-common-space-base) * 4)',
|
||||
'ti-common-space-5x': 'calc(var(--ti-common-space-base) * 5)',
|
||||
'ti-common-space-6x': 'calc(var(--ti-common-space-base) * 6)',
|
||||
'ti-common-space-8x': 'calc(var(--ti-common-space-base) * 8)',
|
||||
'ti-common-space-10x': 'calc(var(--ti-common-space-base) * 10)',
|
||||
'ti-common-space-6': '6px',
|
||||
'ti-common-space-10': '10px',
|
||||
'ti-common-space-0': '0px',
|
||||
'ti-common-space-2': '2px',
|
||||
|
||||
/* 阴影 */
|
||||
'ti-common-shadow-1-up': '0 -1px 3px 0 rgba(0,0,0,0.08)',
|
||||
'ti-common-shadow-1-down': '0 1px 3px 0 rgba(0,0,0,0.08)',
|
||||
'ti-common-shadow-1-left': '-1px 0px3px 0 rgba(0,0,0,0.08)',
|
||||
'ti-common-shadow-1-right': '1px 0px 3px 0 rgba(0,0,0,0.08)',
|
||||
'ti-common-shadow-2-up': '0 -2px 12px 0 rgba(0,0,0,0.16)',
|
||||
'ti-common-shadow-2-down': '0 2px 12px 0 rgba(0,0,0,0.16)',
|
||||
'ti-common-shadow-2-left': '-2px 0 12px 0 rgba(0,0,0,0.16)',
|
||||
'ti-common-shadow-2-right': '2px 0 12px 0 rgba(0,0,0,0.16)',
|
||||
'ti-common-shadow-3-up': '0 -4px 16px 0 rgba(0,0,0,0.08)',
|
||||
'ti-common-shadow-3-down': '0 4px 16px 0 rgba(0,0,0,0.08)',
|
||||
'ti-common-shadow-3-left': '-4px 0 16px 0 rgba(0,0,0,0.08)',
|
||||
'ti-common-shadow-3-right': '4px 0 16px 0 rgba(0,0,0,0.08)',
|
||||
'ti-common-shadow-4-up': '0 -8px 24px 0 rgba(0,0,0,0.16)',
|
||||
'ti-common-shadow-4-down': '0 8px 24px 0 rgba(0,0,0,0.16)',
|
||||
'ti-common-shadow-4-left': '-8px 0 24px 0 rgba(0,0,0,0.16)',
|
||||
'ti-common-shadow-4-right': '8px 0 24px 0 rgba(0,0,0,0.16)',
|
||||
|
||||
/* 圆角 */
|
||||
'ti-common-border-radius-normal': 'var(--ti-common-border-radius-3)',
|
||||
'ti-common-border-radius-1': '2px',
|
||||
'ti-common-border-radius-2': '4px',
|
||||
'ti-common-border-radius-3': '6px',
|
||||
'ti-common-border-radius-4': '8px',
|
||||
'ti-common-border-radius-5': '12px',
|
||||
'ti-common-border-radius-6': '16px',
|
||||
'ti-common-border-radius-7': '24px',
|
||||
'ti-common-border-radius-8': '32px',
|
||||
'ti-common-border-radius-9': '48px',
|
||||
'ti-common-border-radius-10': '100px',
|
||||
|
||||
/* 2023.4.17 新增 */
|
||||
|
||||
/* 主要 */
|
||||
'ti-common-color-primary-normal': 'var(--ti-base-color-brand)',
|
||||
'ti-common-color-primary-hover': 'var(--ti-base-color-brand-1)',
|
||||
'ti-common-color-primary-active': 'var(--ti-base-color-brand-1)',
|
||||
'ti-common-color-primary-disabled': 'var(--ti-base-color-bg-1)',
|
||||
'ti-common-color-primary-disabled-border': 'var(--ti-base-color-bg-1)',
|
||||
'ti-common-color-primary-disabled-text': 'var(--ti-base-color-common-3)',
|
||||
|
||||
/* 成功 */
|
||||
'ti-common-color-success-normal': 'var(--ti-base-color-success)',
|
||||
'ti-common-color-success-hover': '#b9e683',
|
||||
'ti-common-color-success-active': '#b9e683',
|
||||
'ti-common-color-success-disabled': 'var(--ti-base-color-bg-1)',
|
||||
'ti-common-color-success-disabled-border': 'var(--ti-base-color-bg-1)',
|
||||
'ti-common-color-success-disabled-text': 'var(--ti-base-color-common-3)',
|
||||
|
||||
/* 警告 */
|
||||
'ti-common-color-warning-normal': 'var(--ti-base-color-warn)',
|
||||
'ti-common-color-warning-hover': '#fcc98b',
|
||||
'ti-common-color-warning-active': '#fcc98b',
|
||||
'ti-common-color-warning-disabled': 'var(--ti-base-color-bg-1)',
|
||||
'ti-common-color-warning-disabled-border': 'var(--ti-base-color-bg-1)',
|
||||
'ti-common-color-warning-disabled-text': 'var(--ti-base-color-common-3)',
|
||||
|
||||
/* 失败 */
|
||||
'ti-common-color-danger-normal': 'var(--ti-base-color-error)',
|
||||
'ti-common-color-danger-hover': '#faa9a5',
|
||||
'ti-common-color-danger-active': '#faa9a5',
|
||||
'ti-common-color-danger-disabled': 'var(--ti-base-color-bg-1)',
|
||||
'ti-common-color-danger-disabled-border': 'var(--ti-base-color-bg-1)',
|
||||
'ti-common-color-danger-disabled-text': 'var(--ti-base-color-common-3)',
|
||||
|
||||
/* 信息 */
|
||||
'ti-common-color-info-normal': 'var(--ti-base-color-common)',
|
||||
'ti-common-color-info-hover': 'var(--ti-base-color-common-1)',
|
||||
'ti-common-color-info-active': 'var(--ti-base-color-common-1)',
|
||||
'ti-common-color-info-disabled': 'var(--ti-base-color-bg-1)',
|
||||
'ti-common-color-info-disabled-border': 'var(--ti-base-color-bg-1)',
|
||||
'ti-common-color-info-disabled-text': 'var(--ti-base-color-common-3)',
|
||||
|
||||
'ti-common-color-light': 'var(--ti-base-color-bg-5)',
|
||||
'ti-common-color-dark': '#000',
|
||||
|
||||
/* 边框/分割线颜色 */
|
||||
'ti-common-color-border': '#999999',
|
||||
'ti-common-color-border-hover': 'var(--ti-base-color-brand)',
|
||||
|
||||
/* 背景色 */
|
||||
'ti-common-color-hover-background': 'var(--ti-base-color-bg);',
|
||||
'ti-common-color-selected-background': 'var(--ti-base-color-bg)',
|
||||
|
||||
/* 文本色 */
|
||||
'ti-common-color-selected-text-color': 'var(--ti-base-color-brand)',
|
||||
'ti-common-color-placeholder': 'var(--ti-base-color-common-2)',
|
||||
|
||||
/* 间距 */
|
||||
'ti-common-dropdown-gap': '4px',
|
||||
|
||||
/* 字重 */
|
||||
'ti-common-font-weight-light': '100',
|
||||
'ti-common-font-weight-normal': '400',
|
||||
'ti-common-font-weight-bold': '600',
|
||||
|
||||
/* 字体 */
|
||||
'ti-common-font-family-normal': 'var(--ti-common-font-family)',
|
||||
|
||||
/* 宽 */
|
||||
'ti-common-size-width-large': '152px',
|
||||
'ti-common-size-width-medium': '120px',
|
||||
'ti-common-size-width-normal': '104px', // Default
|
||||
'ti-common-size-width-small': '80px',
|
||||
'ti-common-size-width-minor': '30px',
|
||||
'ti-common-size-width-mini': '24px',
|
||||
|
||||
/* 高 */
|
||||
'ti-common-size-height-large': '48px',
|
||||
'ti-common-size-height-medium': '40px',
|
||||
'ti-common-size-height-normal': '32px', // Default
|
||||
'ti-common-size-height-small': '24px',
|
||||
'ti-common-size-height-minor': '30px',
|
||||
'ti-common-size-height-mini': '24px',
|
||||
|
||||
/* 行高 */
|
||||
'ti-common-line-height-base': '18px', // 跟字号对应
|
||||
'ti-common-line-height-1': '22px',
|
||||
'ti-common-line-height-2': '24px',
|
||||
'ti-common-line-height-3': '28px',
|
||||
'ti-common-line-height-4': '30px',
|
||||
'ti-common-line-height-5': '36px',
|
||||
'ti-common-line-height-6': '48px',
|
||||
'ti-common-line-height-7': '54px',
|
||||
'ti-common-line-height-8': '60px',
|
||||
'ti-common-line-height-9': '72px',
|
||||
'ti-common-line-height-10': '84px',
|
||||
|
||||
/* 滚动条 */
|
||||
'ti-common-scrollbar-width': '8px',
|
||||
'ti-common-scrollbar-height': '8px',
|
||||
'ti-common-scrollbar-track-piece-bg-color': 'var(--ti-base-color-bg-5)',
|
||||
'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)',
|
||||
|
||||
// 以下皆为新增变量
|
||||
// 新增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.js'
|
||||
|
||||
export const concatTheme = {}
|
||||
Loading…
Reference in New Issue