Maxwell_YCM
/
tiny-vue
forked from opentiny/tiny-vue
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

add button

This commit is contained in:
Maxwell_YCM 2024-10-21 15:48:59 +08:00
parent 87687d3741
commit b097b2db0c
7 changed files with 495 additions and 75 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
examples/docs/newsrc/App.vue
View File

@ -3,6 +3,9 @@
<div class="m10 pb10 b-b">
<div style="float: right">
组件库模式： <tiny-button-group :data="state.groupData" v-model="modeState.mode"></tiny-button-group>
<tiny-button @click="toggleTheme" class="ml10">
{{ state.currentTheme === 'light' ? '深色模式' : '浅色模式' }}
</tiny-button>
</div>
<div class="f-r f-box-center">
<div class="f22 sm-show mr16 cur-hand d-none" @click="toggleFixedMenu">
@ -27,13 +30,15 @@
<script>
import './style.css'
import { ButtonGroup, Link } from '@opentiny/vue'
import { ButtonGroup, Link, Button } from '@opentiny/vue'
import { iconEditorMenuRight, iconEditorMenuLeft } from '@opentiny/vue-icon'
import TinyPc from './pc.vue'
import TinyMobile from './mobile.vue'
import TinyMobileFirst from './mobile-first.vue'
import { hooks } from '@opentiny/vue-common'
import { useModeCtx } from './uses'
import { tinyDarkTheme, tinySmbTheme } from '@opentiny/vue-theme/theme'
import TinyThemeTool from '@opentiny/vue-theme/theme-tool'
export default {
components: {
@ -42,6 +47,7 @@ export default {
TinyMobileFirst,
TinyButtonGroup: ButtonGroup,
TinyLink: Link,
TinyButton: Button,
IconEditorMenuRight: iconEditorMenuRight(),
IconEditorMenuLeft: iconEditorMenuLeft()
},
@ -54,9 +60,12 @@ export default {
{ text: 'Mobile-first', value: 'mobile-first' }
],
vueVersion: hooks.version,
showFixedMenu: false
currentTheme: 'light',
showFixedMenu: true
})
const themeTool = new TinyThemeTool(tinySmbTheme, 'tinyStyleSheetId')
hooks.onMounted(() => {
hooks.watch(
() => modeState.mode,
@ -78,13 +87,20 @@ export default {
state.showFixedMenu = !state.showFixedMenu
}
const toggleTheme = () => {
state.currentTheme = state.currentTheme === 'light' ? 'dark' : 'light'
const theme = state.currentTheme === 'light' ? tinySmbTheme : tinyDarkTheme
themeTool.changeTheme(theme)
}
// 解析url, 生成modeState
modeFn.loadPage()
return {
state,
modeState,
toggleFixedMenu
toggleFixedMenu,
toggleTheme
}
}
}
</script>
</script>

7
examples/vue3/src/main.ts
View File

@ -1,5 +1,7 @@
import * as Vue3 from 'vue'
import 'uno.css'
import TinyThemeTool from '@opentiny/vue-theme/theme-tool'
import { tinyDarkTheme, tinySmbTheme } from '@opentiny/vue-theme/theme'
import { createI18n } from 'vue-i18n'
import { initI18n } from '@opentiny/vue-locale'
import { Loading } from '@opentiny/vue'
@ -13,9 +15,12 @@ app.config.globalProperties.tiny_mode = { value: mode }
app.config.globalProperties.isPcMode = mode === 'pc'
app.config.globalProperties.isMobileMode = mode === 'mobile'
const theme = new TinyThemeTool(tinyDarkTheme, 'tinyStyleSheetId')
// 注入全局的saas主题变量
app.config.globalProperties.tiny_theme = { value: import.meta.env.VITE_TINY_THEME }
// app.config.globalProperties.tiny_theme = theme
app.use(initI18n({ createI18n, i18n: {} } as any))
app.use(Loading)
app.mount('#app')
app.mount('#app')

3
packages/theme/src/theme/aurora-theme/index.js
View File

@ -558,4 +558,5 @@ export const tinyBaseAuroraTheme = {
'ti-common-text-align': 'var(--ti-base-text-align)'
}
export * from './component.js'
// export * from './component.js'
export const concatTheme = {}

44
packages/theme/src/theme/dark-theme/devui.json
View File

@ -1,44 +0,0 @@
{
"devui-btn-common-bg": "#3A3E47",
"devui-btn-common-bg-hover": "#4A4E57",
"devui-global-bg": "#1E2128",
"devui-glass-morphism-bg": "rgba(30,33,40,0.9)",
"devui-base-bg": "#282C34",
"devui-brand": "#E0E0E0",
"devui-brand-foil": "#1E2128",
"devui-brand-active-focus": "#FFFFFF",
"devui-primary-active": "#FFFFFF",
"devui-brand-active": "#FFFFFF",
"devui-brand-hover": "#F2F2F3",
"devui-text": "#E0E0E0",
"devui-aide-text": "#A0A0A0",
"devui-placeholder": "#6C7078",
"devui-disabled-text": "#6C7078",
"devui-disabled-bg": "#3A3E47",
"devui-line": "#4A4E57",
"devui-dividing-line": "#3A3E47",
"devui-list-item-hover-bg": "#3A3E47",
"devui-list-item-active-bg": "#4A4E57",
"devui-list-item-active-hover-bg": "#4A4E57",
"devui-list-item-selected-bg": "#4A4E57",
"devui-list-item-hover-text": "#FFFFFF",
"devui-list-item-active-text": "#FFFFFF",
"devui-icon-text": "#6C7078",
"devui-primary": "#E0E0E0",
"devui-primary-hover": "#FFFFFF",
"devui-form-control-line": "#4A4E57",
"devui-form-control-line-hover": "#A0A0A0",
"devui-icon-fill": "#A0A0A0",
"devui-icon-fill-weak": "#6C7078",
"devui-icon-fill-active": "#FFFFFF",
"devui-icon-fill-active-hover": "#FFFFFF",
"devui-shape-icon-fill": "#4A4E57",
"devui-shape-icon-fill-hover": "#6C7078",
"devui-shape-icon-fill-active": "#6C7078",
"devui-shape-icon-fill-disabled": "#3A3E47",
"devui-form-control-line-active": "#FFFFFF",
"devui-form-control-line-active-hover": "#FFFFFF",
"devui-connected-overlay-line": "#E0E0E0",
"devui-primary-disabled": "#4A4E57",
"devui-icon-fill-active-disabled": "#4A4E57"
}

479
packages/theme/src/theme/dark-theme/index.js
View File

@ -1,22 +1,461 @@
/**
* 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 tinyBaseDarkTheme = {
/* 基础色 */
export const darkTheme = {
'ti-common-color-primary-normal': '#E0E0E0',
'ti-common-color-primary-hover': '#FFFFFF',
'ti-button-primary-plain-bg-color': 'rgba(224, 224, 224, 0.1)',
// 品牌色
'ti-base-color-brand': '#1476FF', // 主色蓝/链接颜色
'ti-base-color-brand-1': '#3D8DFF', // 主色悬浮色、链接悬浮色
'ti-base-color-brand-2': '#1476FF', // 文字按钮色、文字按钮悬浮色
'ti-base-color-brand-3': '#7693F5', // 深色背景下图标
'ti-base-color-brand-4': '#96ADFA', // 深色背景链接色
'ti-base-color-brand-5': '#4D4D4D', // 选块悬浮色/页签禁用文字色
'ti-base-color-brand-6': '#2C2C2C', // 选块默认色/滑块背景色/分页悬浮色、下拉、列表、悬浮背景、表头背景、下拉菜单、选块选中色
'ti-base-color-brand-7': '#0A3980', // 开关组件"开"禁用背景色
'ti-base-color-brand-8': '#0A3980', // 日期选择悬浮背景色
'ti-base-color-brand-9': '#333333', // 开关组件"关"禁用背景色
'ti-base-color-brand-5': '#E0E0E0',
'ti-autocomplete-li-text-color': '#E0E0E0',
'ti-autocomplete-li-hover-bg-color': '#3A3E47',
'ti-autocomplete-li-select-bg-color': '#4A4E57'
}
// 中立色
'ti-base-color-common': '#E6E6E6', // 正文主色，重要信息、标题颜色、输入类文本颜色、导航栏文字图标
'ti-base-color-common-1': '#CCCCCC', // 次要信息/图标默认
'ti-base-color-common-2': '#999999', // 弱化信息、说明文字
'ti-base-color-common-3': '#666666', // 边框色（如下拉、输入框）/文字禁用/禁用图标
'ti-base-color-common-4': '#4D4D4D', // 禁用描边
'ti-base-color-common-5': '#333333', // 深色背景分割线
'ti-base-color-common-6': '#4D4D4D', // 灰色背景分割线
'ti-base-color-bg': '#1F1F1F', // 通用背景-页面背景色
'ti-base-color-bg-1': '#2C2C2C', // 禁用背景/小表格中禁用背景/支付列表中禁用背景、顶部导航下拉悬浮背景色
'ti-base-color-bg-2': '#262626', // 新区域组件-悬浮背景色
'ti-base-color-bg-3': '#1476FF', // 主要按钮-背景色
'ti-base-color-bg-4': '#3D8DFF', // 主要按钮-hover/Focus背景色
'ti-base-color-bg-5': '#262626', // 顶部导航背景色、 顶部导航下拉背景色
'ti-base-color-bg-6': '#333333', // 标签背景色
'ti-base-color-bg-7': '#2C2C2C', // 次要按钮-背景色、次要按钮-hover/Focus/active背景色、输入框背景色
// 功能色
'ti-base-color-success-bg': '#1A3E00', // 成功-背景色
'ti-base-color-success-border': '#2A6600', // 成功-边框色
'ti-base-color-success': '#5CB300', // 成功-图标色
'ti-base-color-success-text': '#5CB300', // 成功-文本色
'ti-base-color-error-bg': '#4D0000', // 错误-背景色/错误校验背景色
'ti-base-color-error-border': '#800000', // 错误-边框色
'ti-base-color-error': '#F23030', // 错误-图标色、校验边框色/、悬浮菜单背景色
'ti-base-color-error-text': '#F23030', // 错误-文本色/交易金额色
'ti-base-color-warn-bg': '#4D2600', // 告警-背景色
'ti-base-color-warn-border': '#804000', // 告警-边框色
'ti-base-color-warn': '#FF8800', // 告警-图标色、深色背景-运营活动文本色
'ti-base-color-warn-text': '#FF8800', // 告警-文本色
'ti-base-color-prompt-bg': '#003366', // 提示-背景色
'ti-base-color-prompt-border': '#004D99', // 提示-边框色
'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-1)',
'ti-common-color-text-white': '#FFFFFF',
'ti-common-color-text-darkbg': 'var(--ti-base-color-common)',
'ti-common-color-text-darkbg-disabled': 'var(--ti-base-color-common-3)',
'ti-common-color-text-gray-disabled': 'var(--ti-base-color-common-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-1)',
'ti-common-color-text-gray': 'var(--ti-base-color-common-2)',
// 图标色
'ti-common-color-icon': 'var(--ti-base-color-common)',
'ti-common-color-icon-normal': 'var(--ti-base-color-common-1)',
'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': '#FFFFFF',
'ti-common-color-icon-graybg-normal': 'var(--ti-base-color-common-1)',
'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)',
'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-3)',
'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-3)',
'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-1)',
'ti-common-color-bg-minor-active': 'var(--ti-base-color-bg-1)',
'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)',
'ti-common-color-bg-dark-emphasize': 'var(--ti-base-color-bg-1)',
'ti-common-color-bg-dark-active': 'var(--ti-base-color-bg-1)',
'ti-common-color-bg-dark-disabled': 'var(--ti-base-color-common-4)',
'ti-common-color-bg-dark-deep': '#000000',
'ti-common-color-bg-dark-select': '#000000',
// 补全默认主题变量名，因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.2)',
'ti-common-shadow-1-down': '0 1px 3px 0 rgba(0,0,0,0.2)',
'ti-common-shadow-1-left': '-1px 0px3px 0 rgba(0,0,0,0.2)',
'ti-common-shadow-1-right': '1px 0px 3px 0 rgba(0,0,0,0.2)',
'ti-common-shadow-2-up': '0 -2px 12px 0 rgba(0,0,0,0.3)',
'ti-common-shadow-2-down': '0 2px 12px 0 rgba(0,0,0,0.3)',
'ti-common-shadow-2-left': '-2px 0 12px 0 rgba(0,0,0,0.3)',
'ti-common-shadow-2-right': '2px 0 12px 0 rgba(0,0,0,0.3)',
'ti-common-shadow-3-up': '0 -4px 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-left': '-4px 0 16px 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-4-up': '0 -8px 24px 0 rgba(0,0,0,0.3)',
'ti-common-shadow-4-down': '0 8px 24px 0 rgba(0,0,0,0.3)',
'ti-common-shadow-4-left': '-8px 0 24px 0 rgba(0,0,0,0.3)',
'ti-common-shadow-4-right': '8px 0 24px 0 rgba(0,0,0,0.3)',
/* 圆角 */
'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': '#7ED321',
'ti-common-color-success-active': '#7ED321',
'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': '#FFA940',
'ti-common-color-warning-active': '#FFA940',
'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': '#FF5757',
'ti-common-color-danger-active': '#FF5757',
'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': '#FFFFFF',
'ti-common-color-dark': '#000000',
/* 边框/分割线颜色 */
'ti-common-color-border': '#4D4D4D',
'ti-common-color-border-hover': 'var(--ti-base-color-brand)',
/* 背景色 */
'ti-common-color-hover-background': 'var(--ti-base-color-bg-2)',
'ti-common-color-selected-background': 'var(--ti-base-color-bg-2)',
/* 文本色 */
'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': '#333333',
'ti-common-scrollbar-thumb-bg-color': '#666666',
'ti-common-scrollbar-thumb-border-radius': '4px',
'ti-common-scrollbar-thumb-hover-bg-color': '#808080',
'ti-common-scrollbar-thumb-active-bg-color': '#999999',
// 以下皆为新增变量
// 新增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 = {}

5
packages/theme/src/theme/dark-theme/index.json
View File

@ -1,5 +0,0 @@
{
"ti-base-color-brand-6": "#E0E0E0",
"ti-base-color-common-7": "#E0E0E0",
"ti-button-normal-background-color": "#3A3E47"
}

8
packages/theme/src/theme/index.js
View File

@ -16,6 +16,7 @@ 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'
import { tinyBaseDarkTheme, concatTheme as darkConcat } from './dark-theme'
export const tinyImpressionTheme = {
id: 'tiny-impression-theme',
@ -58,3 +59,10 @@ export const tinySmbTheme = {
cnName: 'SMB',
data: { ...tinyBaseSmbTheme, ...smbConcat }
}
export const tinyDarkTheme = {
id: 'tiny-smb-theme',
name: 'SMB',
cnName: 'SMB',
data: { ...tinyBaseDarkTheme, ...darkConcat }
}