@qn-pandora/pandora-visualization/lib/global/theme.less

Pandora 通用可视化库

@import '@qn-pandora/pandora-component/lib/style/theme.less';
@import './dashboard.less';
// classname前后缀变量=========================================================
@sdk-prefix: pandora-sdk; // 多个使用

// 基础颜色变量=========================================================
// antd覆盖色

// pandora色

// 基础功能色变量=========================================================

// 主题色------------------------
// antd覆盖色
// pandora色
@theme-color: #2c6dd2;
@normal-color: #ffffff;
@second-primary-color: #7a869b;
@theme-color-005: fade(@theme-color, 5%);
@theme-color-010: fade(@theme-color, 10%);
@theme-color-020: fade(@theme-color, 20%);
@theme-color-030: fade(@theme-color, 30%);
@theme-color-080: fade(@theme-color, 80%);

// 字体------------------------
// antd覆盖色
// pandora色
@font-disable-color: #c1c7d0;
@font-color-1: #232c3b;
@font-color-2: #42526e;
@font-color-3: #7a869a;
@font-color-4: #303133;
@font-color-5: #666;
@font-color-6: #333;
@font-key-color: #606266;
@disabled-text-color: #9eaec5;

// 布局------------------------
// antd覆盖色
// pandora色
@content-color: #42526e;

// 提示------------------------
// antd覆盖色
// pandora色
@delete-color: #ff6b6b;
@success-color: #20c997;
@error-color: #f5222d;

// 边框------------------------
// antd覆盖色
@border-color-base: #bfbfbf;
@border-radius-base: 2px;

// pandora色
@border-color-normal: #e5e5e5;
@border-color-2: #d9d9d9;

// icon------------------------
// antd覆盖色
// pandora色
@icon-color: #c1c7d0;
@icon-color-2: rgba(66, 82, 110, 1);
@icon-color-3: #bfbfbf;
@icon-color-up: #f56c6c;
@icon-color-down: #67c23a;
@icon-desc-color: #d9dce1;
@icon-desc-hover-color: #97a0ad;

// 组件色变量=========================================================
// Common Button------------------------
// antd覆盖色
@btn-border-radius-base: 0; // antd
@btn-border-radius-sm: 0; // antd
@btn-cancel-color: @button-default-color;
@btn-cancel-bg: @button-default-bg;
// pandora色
@button-disabled-bg: #c1c7d0;
@button-disabled-color: @normal-color;
@button-disabled-border-color: #c1c7d0;
@button-default-bg: #e9f0fa;
@button-default-color: @theme-color;
@button-default-border-color: @button-default-bg;
@button-default-hover-bg: @button-default-bg;
@button-default-hover-color: @theme-color;
@button-default-hover-border-color: @theme-color;
@button-primary-bg: @theme-color;
@button-primary-color: @normal-color;
@button-primary-border-color: @theme-color;
@button-primary-hover-bg: @theme-color-080;
@button-primary-hover-color: @normal-color;
@button-primary-hover-border-color: @theme-color-080;
@button-ghost-bg: transparent;
@button-ghost-color: @theme-color;
@button-ghost-border-color: @theme-color;
@button-ghost-hover-bg: @theme-color;
@button-ghost-hover-color: @normal-color;
@button-ghost-hover-border-color: @theme-color;

// Input和label------------------------
// antd覆盖色
@input-placeholder-color: #c1c7d0; //  antd
// pandora色
@input-bg: #f4f5f7;

// Select------------------------
// antd覆盖色
// pandora色
@select-bg: @input-bg;
@select-popover-hover-color: rgba(44, 109, 210, 0.05);

// grid-layout------------------------
@grid-layout-border: @theme-color-030;
@dark-grid-layout-border: @theme-color-030;

// mobile------------------------
@mobile-table-filter-modal-tip-line-color: #939393;
@mobile-table-filter-modal-text-color: rgba(0, 0, 0, 1);

// 图表组件=========================================================
// 基础------------------------
// 深色主题
@dark-chart-title-color: #c1c7d0;

// 图表描述颜色------------------------
@desc-box-color: rgba(35, 44, 59, 0.2);
@desc-button-color: #4e80ef;

// chart legend------------------------
@legend-unselect-color: #bfbfbf;
@legend-tooltip-bg-color: rgba(50, 50, 50, 0.7);
@legend-font-color: #999999;
@light-chart-opt-bar-icon-color: #7a869a;

// 图表类型切换组件------------------------
@chart-type-name-color: #999999;
@chart-type-left-bg-color: #fafafa;

// dashboard------------------------
@dashboard-bg: #f6f8fb; // 解决
@dashboard-item-bg: @normal-color;
@dashboard-dark-bg: #19202b; // 解决
@dashboard-item-dark-bg: #232c3b; // 解决
@light-dashboard-desc-color: #bcc1cc;
@dashboard-table-odd-row-bg: rgba(44, 109, 210, 0.05);
@dashboard-pannel-shadow: rgba(0, 0, 0, 0.08);
// 编辑图表标题弹出框
@braft-editor-border-color: #bfbfbf;
// 深色主题
@dashboard-table-webkit-scrollbar-thumb-bg: #6d6a6a;
@dashboard-table-pagination-item-color: rgb(2, 18, 53);
@dark-table-pagination-color: #bcc1cc;

// operation-bar------------------------
@dashboard-operation-bar-bg: @dashboard-item-bg; // 解决
@dashboard-operation-bar-dark-bg: @dashboard-item-dark-bg; // 解决
@dashboard-operation-bar-color: @font-color-1; // 解决
@dashboard-operation-bar-dark-color: @normal-color; // 解决
// TODO 抽取operation bar上面的按钮相关颜色

// panel------------------------
@dashboard-panel-bg: @dashboard-bg; // 解决
@dashboard-panel-dark-bg: @dashboard-dark-bg; // 解决
// TODO 抽取panel chart上icon等相关颜色

// tooltip------------------------
// 深色主题
@dashboard-tooltip-bg-color: rgba(50, 50, 50, 0.7);
@dashboard-tooltip-border-color: rgb(51, 51, 51);

// trend --------------------
@trend-up-color: #fa541c;
@trend-equal-color: #faad14;
@trend-down-color: #8fc512;

@tree-select-bg-color: #eeeeee;
@drag-view-bg-color: #f5f5f5;
@add-on-bg-color: #fafafa;