tiny-engine/packages/theme/dark/variable.less

452 lines
20 KiB
Plaintext

// 暗色主题
:root {
// 基础配置,前缀为 --base
--base-min-width: 1280px;
// ------ 主要的公共主题色,前缀为 --ti-lowcode-common -------
--ti-lowcode-common-primary-color: #4f77ff;
--ti-lowcode-common-primary-hover-color: #3961eb;
--ti-lowcode-common-primary-color-1: #cad6ff;
--ti-lowcode-common-component-bg: #2f2f2f;
--ti-lowcode-common-component-hover-bg: #3c3c3c;
--ti-lowcode-common-layout-bg: #191818;
--ti-lowcode-common-layout-hover-bg: #191919;
--ti-lowcode-common-header-bg: #202020;
--ti-lowcode-common-bg-1: #404040;
--ti-lowcode-common-bg-2: #4d4d4d;
--ti-lowcode-common-bg-3: #2b2b2b;
--ti-lowcode-common-bg-4: #262626;
--ti-lowcode-common-bg-5: #eee;
--ti-lowcode-common-bg-6: #414141;
--ti-lowcode-common-bg-7: #8a8e99;
--ti-lowcode-common-bg-8: #222;
--ti-lowcode-common-bg-9: #292929;
--ti-lowcode-common-hover-bg-1: rgba(255, 255, 255, 0.1);
--ti-lowcode-common-transparent-color: transparent;
--ti-lowcode-common-primary-text-color: #fff;
--ti-lowcode-common-secondary-text-color: #adb0b8;
--ti-lowcode-common-text-title-color: #252b3a;
--ti-lowcode-common-text-color-1: #6a6a6a;
--ti-lowcode-common-text-color-2: #d9d9d9;
--ti-lowcode-common-text-color-3: #fff;
--ti-lowcode-common-text-color-4: #50d4ab;
--ti-lowcode-common-text-color-5: #8a8e99;
--ti-lowcode-common-text-color-6: #575d6c;
--ti-lowcode-common-third-text-color: #ababab;
--ti-lowcode-common-danger-color: #c7000b;
--ti-lowcode-common-border-color-1: #212121;
--ti-lowcode-common-border-color-2: #313131;
--ti-lowcode-common-border-color-3: #606165;
--ti-lowcode-common-border-color-4: #232323;
--ti-lowcode-common-error-color: var(--ti-lowcode-base-error-color);
--ti-lowcode-info-color: #7693f5;
--ti-lowcode-warning-color: #fa9841;
--ti-lowcode-warning-color-1: #fac20a;
--ti-lowcode-common-empty-color: #9a9a9a;
// tiny vue 的 css 变量,覆盖掉就好
.tiny-form-item {
// 错误背景色
--ti-form-item-error-bg-color: #433535;
}
.tiny-grid {
--ti-grid-light-color: var(--ti-lowcode-common-component-bg);
--ti-grid-text-color: var(--ti-lowcode-common-text-color-5);
}
--ti-lowcode-trigger-color: #adb0b8;
--ti-lowcode-trigger-hover-color: #8a8e99;
--ti-lowcode-input-error-color: var(--ti-lowcode-common-error-color);
--ti-lowcode-input-error-bg: rgba(246, 111, 106, 0.1);
// ------ 公共组件的主题色,前缀为 --ti-lowcode-component-组件名 ------
// tinysearch 背景色
--ti-lowcode-component-search-bg: var(--ti-lowcode-input-bg);
// tinysearch 边框色
--ti-lowcode-component-input-border-color: transparent;
// svgButton
--ti-lowcode-component-svg-button-color: var(--ti-lowcode-common-text-color-2);
--ti-lowcode-component-svg-button-hover-color: var(--ti-lowcode-common-primary-color);
--ti-lowcode-component-svg-button-hover-bg-color: transparent;
--ti-lowcode-component-svg-button-active-color: var(--ti-lowcode-common-primary-color);
--ti-lowcode-component-svg-button-hover-bg-color: transparent;
--ti-lowcode-tabs-active-border-bottom-color: var(--ti-lowcode-common-primary-color);
--ti-lowcode-tabs-active-color: var(--ti-lowcode-common-primary-color);
--ti-lowcode-form-error-tips-color: var(--ti-lowcode-common-error-color);
// 关闭按钮
--ti-lowcode-component-close-icon-text-color: var(--ti-lowcode-common-third-text-color); // 关闭按钮默认颜色
// 关闭按钮 hover 颜色
--ti-lowcode-component-close-icon-text-hover-color: var(--ti-lowcode-common-primary-text-color);
// 设置面板
--ti-lowcode-component-setting-panel-label-color: var(--ti-lowcode-common-secondary-text-color);
--ti-lowcode-component-setting-panel-icon-color: var(--ti-lowcode-toolbar-breadcrumb-color);
--ti-lowcode-component-setting-panel-label-tips-bg: #f2f5fc;
// 插件面板
--ti-lowcode-plugin-panel-title-color: var(--ti-lowcode-dialog-font-color); // 插件面板标题色
--ti-lowcode-plugin-panel-bg: var(--ti-lowcode-common-component-bg); // 插件面板背景色
--ti-lowcode-plugin-panel-border-right-color: var(--ti-lowcode-canvas-border-color); // 插件面板右侧边框色
--ti-lowcode-plugin-panel-header-border-bottom-color: #262626; // 插件面板头部区域底部边框线颜色
--ti-lowcode-plugin-panel-title-font-weight: 400; // 插件面板标题加粗效果
// 插件设置面板
--ti-lowcode-plugin-setting-panel-bg: var(--ti-lowcode-common-component-bg); // 插件设置面板背景色
// ------ 各个模块的主题色,前缀为 --ti-lowcode-模块名 -------
--ti-lowcode-design-plugin-color: #8a8e99;
--ti-lowcode-design-toolbar-icon-color: #8a8e99;
--ti-lowcode-nav-panel-border-left-color: transparent;
// 物料-组件列表
--ti-lowcode-material-component-list-border-color: var(--ti-lowcode-common-border-color-4);
--ti-lowcode-material-component-list-hover-bg: var(--ti-lowcode-common-component-hover-bg);
// 页面管理
--ti-lowcode-page-tree-color: var(--ti-lowcode-common-secondary-text-color);
--ti-lowcode-page-tree-hover-color: var(--ti-lowcode-common-primary-text-color);
// 画布 canvas
--ti-lowcode-canvas-iframe-scrollbar-track-color: var(--ti-lowcode-canvas-wrap-bg); // iframe 内部滚动条 track 颜色
// iframe 内部滚动条 滑块 颜色
--ti-lowcode-canvas-iframe-scrollbar-thumb-color: var(--ti-lowcode-common-component-bg);
// 数据源
--ti-lowcode-datasource-list-color: var(--ti-lowcode-toolbar-more-hover-color);
// 状态管理
--ti-lowcode-data-list-color: var(--ti-lowcode-toolbar-icon-color);
// 状态管理面板头部的底部边框色
--ti-lowcode-data-header-border-bottom-color: var(--ti-lowcode-common-bg-4);
// 状态管理示例背景色
--ti-lowcode-data-example-bg-color: var(--ti-lowcode-common-primary-text-color);
// 状态管理示例文字色
--ti-lowcode-data-example-color: var(--ti-lowcode-common-text-title-color);
// 添加高级属性文字颜色
--ti-lowcode-data-advanced-text-color: #dfe1e6;
// 添加高级属性 hover 文字颜色
--ti-lowcode-data-advanced-text-hover-color: #8a8e99;
// 状态管理按激活背景色
--ti-lowcode-data-radio-group-active-bg: var(--ti-lowcode-common-primary-color);
// 状态管理按默认背景色
--ti-lowcode-data-radio-group-bg: var(--ti-lowcode-common-header-bg);
// 教程
--ti-lowcode-tutorial-list-item-color: var(--ti-lowcode-toolbar-breadcrumb-color);
// 头部工具栏背景色
--ti-lowcode-toolbar-bg: #404040;
// 头部工具栏选中背景色
--ti-lowcode-toolbar-active-bg: #212121;
// 头部工具栏边框色
--ti-lowcode-toolbar-border-color: #333;
// 头部工具栏icon颜色 && 右侧属性面板tabs hover字体颜色 && switch 选中hover圆背景色
--ti-lowcode-toolbar-icon-color: #fff;
// 头部工具栏icon颜色
--ti-lowcode-toolbar-icon-active-color: #4f77ff;
// 头部工具栏面包屑背景颜色
--ti-lowcode-toolbar-breadcrumb-background-color: rgba(0, 179, 54, 0.6);
// 头部工具栏更多more图标颜色
--ti-lowcode-toolbar-more-color: rgba(217, 217, 217, 0.4);
// 头部工具栏更多more图标hover颜色
--ti-lowcode-toolbar-more-hover-color: rgba(217, 217, 217, 0.8);
// 头部工具栏面包屑字体颜色 && 右侧属性面板tabs字体颜色 && 右侧属性面板 collapse 头部字体颜色 && switch 选中圆背景色
--ti-lowcode-toolbar-breadcrumb-color: #d9d9d9;
// 头部工具栏画布大小文本hover背景色 && 头部弹框背景色 && context-menu 背景色 && 大纲树节点hover背景色 && 日期组件背景色
--ti-lowcode-toolbar-view-hover-bg: #4d4d4d;
// 头部工具栏i18n国际化字体颜色
--ti-lowcode-toolbar-i18n-color: rgba(255, 255, 255, 0.4);
// 应用发布弹窗图标颜色
--ti-lowcode-toolbar-publish-icon-color: var(--ti-lowcode-common-primary-text-color);
// 头部左侧logo颜色
--ti-lowcode-logo-color: #8a8e99;
// 头部左侧logo颜色
--ti-lowcode-logo-active-color: rgba(255, 255, 255, 0.5);
// 中间画布边框色
--ti-lowcode-canvas-border-color: #1a1a1a;
// 右侧属性面板tab页签背景色 && 表单校验错误输入框背景色
--ti-lowcode-tabs-bg: #2b2b2b;
// 右侧属性面板tab页签边框色 && 弹框边框色 && context-menu 边框色
--ti-lowcode-tabs-border-color: #313131;
// 右侧属性面板tab页签激活状态背景色 && 弹框title背景颜色
--ti-lowcode-tabs-active-bg: #404040;
// 右侧属性面板折叠面板展开内容边框色
--ti-lowcode-collapse-active-border-color: #333;
// 中间画布外框容器背景色 && 弹框底部tip背景色 && select 多选下拉选项hover背景色
--ti-lowcode-canvas-wrap-bg: #5e5e5e;
// 中间画布拖拽宽度按钮背景色
--ti-lowcode-canvas-handle-bg: #2b2b2b;
// 中间画布拖拽宽度按钮背景色
--ti-lowcode-canvas-handle-hover-bg: var(--ti-lowcode-common-primary-color);
// 中间画布底部面包屑背景色 && popover 背景颜色
--ti-lowcode-breadcrumb-bg: #ebebeb;
// 中间画布底部面包屑字体颜色 && popover 字体颜色
--ti-lowcode-breadcrumb-color: #4d4d4d;
// 中间画布底部面包屑三角箭头颜色
--ti-lowcode-breadcrumb-icon-color: #858585;
// 弹框遮罩层背景色
--ti-lowcode-mask-modal-bg: rgba(0, 0, 0, 0.5);
// 引导提示框遮罩层背景色
--ti-lowcode-guide-mask-bg: rgba(255, 255, 255, 0.5);
// 引导高亮遮罩层背景色
--ti-lowcode-guide-highlight-mask-bg: rgba(200, 200, 200, 0.2);
// 引导弹框背景色
--ti-lowcode-guide-dialog-bg: #041320;
// 引导弹框标题,按钮文本字体色
--ti-lowcode-guide-title-color: #fff;
// 引导弹框描述文本字体色
--ti-lowcode-guide-message-color: #a7aab2;
// collapse 折叠面板激活后字体颜色
--ti-lowcode-collapse-active-color: #ebebeb;
// input 框背景色
--ti-lowcode-input-bg: #262626;
// switch 圆点 hover 背景色
--ti-lowcode-switch-after-hover-bg: #6b6b6b;
// switch 圆点 checked 背景色
--ti-lowcode-switch-after-checked-bg: #d9d9d9;
// -----下拉框相关主题配置-----
// 下拉框聚焦时边框颜色
--ti-lowcode-select-focus-border-color: var(--ti-lowcode-common-primary-color);
// 下拉框选中标签字体颜色
--ti-lowcode-select-tags-text-color: #d9d9d9;
// 下拉框选中标签背景颜色
--ti-lowcode-select-tags-bg-color: #5e5e5e;
// 下拉框suffix图标悬浮颜色
--ti-lowcode-select-suffix-icon-color-hover: #fff;
// select 下拉框背景色
--ti-lowcode-dropdown-bg-color: #202020;
// select 下拉面板边框颜色
--ti-lowcode-dropdown-border-color: #333;
// select 下拉面板选型字体颜色
--ti-lowcode-dropdown-item-text-color: #d9d9d9;
// select 下拉框选项hover背景色
--ti-lowcode-dropdown-item-hover-bg-color: var(--ti-lowcode-common-component-bg);
// select 下拉框选项选中背景色
--ti-lowcode-dropdown-item-selected-bg: var(--ti-lowcode-common-component-hover-bg);
// select 下拉框选项选中字体颜色
--ti-lowcode-dropdown-item-selected-color: #ebebeb;
// select 下拉框选项hover字体颜色
--ti-lowcode-dropdown-item-hover-text-color: #ebebeb;
// button info 字体颜色
--ti-lowcode-button-info-color: #fff;
// button default 背景颜色
--ti-lowcode-button-default-bg: transparent;
// 按钮hover字体颜色
--ti-lowcode-button-default-hover-color: #fff;
// 按钮hover背景色
--ti-lowcode-button-default-hover-bg: #6b6b6b;
--ti-lowcode-button-default-hover-border-color: #6b6b6b;
// info 保存按钮背景色
--ti-lowcode-button-info-bg: var(--ti-lowcode-common-primary-color);
// info 保存按钮 hover 背景色
--ti-lowcode-button-info-hover-bg: var(--ti-lowcode-common-primary-hover-color);
// primary 按钮字体颜色
--ti-lowcode-button-primary-color: #fff;
// 按钮边框颜色
--ti-lowcode-button-border-color: #333;
// 组件icon颜色
--ti-lowcode-component-icon-color: #d9d9d9;
// 组件item hover 背景色
--ti-lowcode-component-item-hover-bg: #4d4d4d;
// 左侧插件激活背景色
--ti-lowcode-left-panel-active-bg: #2f2f2f;
// 左侧插件激活边框色
--ti-lowcode-left-panel-active-border-color: #212121;
// 左侧按钮边框色
--ti-lowcode-left-button-border-color: #212121;
// list-item 项背景色
--ti-lowcode-list-item-bg: #333;
// list-item 项激活背景色
--ti-lowcode-list-item-active-bg: #404040;
// radio 按钮组激活背景色
--ti-lowcode-radio-button-active-bg: #2b2b2b;
// grid 布局设置按钮字体颜色
--ti-lowcode-grid-edit-color: #d9d9d9;
// grid 布局设置按钮背景色
--ti-lowcode-grid-edit-bg: #5e5e5e;
// tooltip字体颜色
--ti-lowcode-tooltip-text-color: #999;
// tooltip背景颜色
--ti-lowcode-tooltip-bg-color: #ebebeb;
// tooltip错误提示背景颜色
--ti-lowcode-tooltip-error-bg-color: #c92c3f;
// Fit 字体颜色
--ti-lowcode-fit-label-color: #ebebeb;
// Fit 背景颜色
--ti-lowcode-fit-coordinate-bg: #2b2b2b;
// Fit 边框颜色
--ti-lowcode-fit-coordinate-border-color: #212121;
// Fit 圆点颜色
--ti-lowcode-fit-coordinate-origin-color: #757575;
// more icon 选中背景色
--ti-lowcode-more-icon-selected-bg: #2e2e2e;
// main menu 背景色
--ti-lowcode-main-menu-bg: var(--ti-lowcode-common-component-bg);
--ti-lowcode-main-menu-item-hover-bg: var(--ti-lowcode-common-component-hover-bg);
--ti-lowcode-main-menu-item-hover-color: var(--ti-lowcode-toolbar-icon-color);
// spacing svg 图标上下颜色
--ti-lowcode-spacing-tb-color: #4d4d4d;
// spacing svg 图标上下hover颜色
--ti-lowcode-spacing-tb-hover-color: #5a5a5a;
// spacing svg 图标左右颜色
--ti-lowcode-spacing-lr-color: #555;
// spacing svg 图标左右hover颜色
--ti-lowcode-spacing-lr-hover-color: #626262;
// spacing svg 图标边框颜色
--ti-lowcode-spacing-border-color: #333;
// position direction 字体颜色
--ti-lowcode-position-direction-color: #ebebeb;
// position direction 弹框显示时字体背景色
--ti-lowcode-position-direction-bg: #6b6b6b;
// position Relative to 按钮字体颜色
--ti-lowcode-position-relative-to-color: #ababab;
// position Relative to 按钮边框颜色
--ti-lowcode-position-relative-to-border-color: #363636;
// position Relative to 按钮背景色
--ti-lowcode-position-relative-to-bg: #363636;
// position 选中背景色
--ti-lowcode-position-selected-bg: #2b2b2b;
// icon 图标选择弹框背景色
--ti-lowcode-icon-popover-bg: #404040;
// icon 图标选择弹框字体颜色
--ti-lowcode-icon-popover-color: #d9d9d9;
// icon 图标选择弹框hover颜色
--ti-lowcode-icon-popover-hover-color: #fff;
// 查看区块详情icon颜色
--ti-lowcode-block-detail-icon-color: #f6eeee;
// 中间画布底部面包屑hover背景色
--ti-lowcode-breadcrumb-hover-bg: #fff;
// 弹框中tip提示边框颜色
--ti-lowcode-dialog-tip-border-color: #d9d9d9;
// 弹框字体颜色 && 左侧面板 title 字体颜色
--ti-lowcode-dialog-font-color: #ebebeb;
// 输入框icon图标颜色
--ti-lowcode-input-icon-color: #737373;
// 弹框字体颜色 && 图标颜色 && 输入框 suffix 字体颜色
--ti-lowcode-text-color: #6a6a6a;
// 右侧optionitem的边框色
--ti-lowcode-optionitem-border-color: #2b2b2b;
// 右侧optionitem的背景色
--ti-lowcode-optionitem-background-color: #363636;
//tootip里的input框字体颜色
--ti-lowcode-tootip-input-color: #fff;
//tootip里的input背景颜色
--ti-lowcode-tootip-input-background-color: #363636;
//tootip里的input框边框颜色
--ti-lowcode-tootip-input-border-color: #2b2b2b;
//tootip里的input框箭头颜色
--ti-lowcode-tootip-arrow-border-color: #404040;
// dialogBox弹框示例框边框色
--ti-lowcode-dialog-demo-border-color: #5e5e5e;
// 关闭 icon 图标hover背景色 && 输入框后置文本hover背景色
--ti-lowcode-icon-hover-bg: rgba(255, 255, 255, 0.1);
// 说明提示框警告颜色
--ti-lowcode-description-warning-color: #facb4b;
// 说明提示框错误颜色
--ti-lowcode-description-error-color: #ff0000;
// switch checked状态边框色
--ti-lowcode-switch-checked-border-color: var(--ti-lowcode-common-primary-color);
// 文本链接颜色
--ti-lowcode-text-link-color: #6bb0ff;
// 大纲树node节点选中背景色
--ti-lowcode-node-current-bg: var(--ti-lowcode-common-primary-color);
// 大纲树node节点不可拖拽背景色 && 表单校验错误边框色
--ti-lowcode-node-nodrag-bg: #ea384c;
// 成功状态按钮边框色
--ti-lowcode-success-border-color: #2ad986;
// 错误提示颜色
--ti-lowcode-error-tip-color: #de504e;
// 画布拖拽元素背景色
--ti-lowcode-drag-ghost-bg: #888;
// 画布拖拽位置线背景色
--ti-lowcode-ghost-line-bg: #ffb100;
// 描述颜色
--ti-lowcode-description-color: var(--ti-lowcode-common-text-color-4);
// 更多折叠面板头部hover背景色
--ti-lowcode-more-collapse-header-hover-color: #5a5a5a;
// 绑定时icon图标颜色
--ti-lowcode-icon-bind-color: #006cff;
// 创建字体颜色
--ti-lowcode-create-color: #575d6c;
// 删除按钮hover背景色 && 表单校验错误背景色
--ti-lowcode-delete-button-hover-bg: #c92c3f;
// input框focus 获焦时边框颜色
--ti-lowcode-input-focus-border-color: var(--ti-lowcode-common-primary-color);
// 次要描述字体颜色 && 面包屑label 字体颜色
--ti-lowcode-description-minor-color: #ababab;
// 样式设置 label 字体颜色
--ti-lowcode-style-setting-label-color: #8bbefa;
// 样式设置 label 背景颜色
--ti-lowcode-style-setting-label-bg: rgba(76, 152, 241, 0.15);
// 多人协作item项hover背景色
--ti-lowcode-user-item-hover-bg: rgba(94, 94, 94, 0.8);
// 多人协作人员头像背景色
--ti-lowcode-user-header-bg: #919191;
// 工具栏提示框字体颜色
--ti-lowcode-toolbar-popover-color: #363636;
// 工具栏 media 提示框字体颜色
--ti-lowcode-media-popover-color: #adb0b8;
// 工具栏 media 提示框标题字体颜色
--ti-lowcode-media-popover-title-color: #fff;
// 工具栏icon禁用颜色
--ti-lowcode-disabled-color: #757575;
// 状态管理详情收缩摩纳哥编辑器icon颜色
--ti-lowcode-state-management-screen-icon-color: #fff;
// 状态管理搜索无结果显示颜色
--ti-lowcode-state-management-query-color: #fff;
// 状态管理代码编辑器边框颜色
--ti-lowcode-state-management-monaco-editor-border-color: transparent;
// Popover提示框
--ti-lowcode-popover-color: var(--ti-lowcode-breadcrumb-color);
--ti-lowcode-popover-bg-color: #191919;
// 自定义类名lowcode弹框背景色
--ti-lowcode-custom-popover-bg-color: #404040;
// 自定义类名lowcode弹框字体颜色
--ti-lowcode-custom-popover-text-color: #d9d9d9;
// 自定义类名lowcode弹框边框颜色
--ti-lowcode-custom-popover-border-color: #313131;
// 滚动条thumb颜色
--ti-lowcode-scrollbar-thumb-background-color: rgba(121, 121, 121, 0.4);
// 可点击交互的文字颜色
--ti-lowcode-common-interaction-text-color: #5e7ce0;
// 数字输入框组件下拉列表文字颜色
--ti-lowcode-numeric-unit-text-color: var(--ti-lowcode-text-color);
//左侧插件栏hover背景色
--ti-plugins-hover-bg-color: #ffffff;
//左侧插件栏hover文字色
--ti-plugins-hover-text-color: #4d4d4d;
//左侧插件栏hover边框色
--ti-plugins-hover-border-color: #9e9e9e;
// 表格行间背景色
--ti-lowcode-new-table-row-sepline-background: #1f1f1f;
// 查看指引视频
--ti-lowcode-block-video-tip-color: var(--ti-lowcode-base-primary-color-2);
// 属性设置、事件设置等列表的背景色
--ti-lowcode-meta-list-item-border-color: #2b2b2b;
// 属性设置、事件设置等列表的背景色
--ti-lowcode-meta-list-item-bg-color: #363636;
// 空数据图标颜色
--ti-lowcode-empty-icon-color: #fff;
--ti-lowcode-popover-option-popper-border-color: transparent;
--ti-lowcode-toolbar-hover-popper: var(--ti-lowcode-common-primary-text-color);
}