qt-public-ui/theme/index.js

新设计规范下业务组件库

module.exports = {
  // 颜色
  '@primary-color': '#3B82FE',
  '@success-color': '#44CA5E',
  '@error-color': '#FF7474',
  '@warning-color': '#FC9C41',
  '@highlight-color': '@primary-color',
  '@border-radius-base': '2px',
  '@body-background': '#EDEFF4',
  '@component-background': '#FFF',
  '@active-background': '#F0F5FF',
  '@info-color': '@primary-color',
  '@processing-color': '@primary-color',
  '@disabled-color': '#C4C9D2',
  '@disabled-bg': '#F8FAFB',
  '@heading-color': '@text-color',
  '@normal-color': '#F7F8FA',
  '@white': '#fff',
  '@black': '#000',
  '@text-color-info': '#838D9A',

  // 通用 hover/active 背景
  '@item-hover-bg': '#F5F9FF',
  '@item-active-bg': '#EBF2FD',

  // 线条颜色
  '@border-color-base': '#E1E4E8',
  '@border-color-split': '#F0F1F3',
  '@border-color-active': '#A7C7FF',

  // 阴影
  '@shadow-color': 'rgba(0, 31, 86, 0.1)',
  '@box-shadow-base': '0 0 6px 0 @shadow-color',
  '@normal-shadow': '0 0 4px 0 rgba(59,130,254,0.06)',
  '@hover-shadow': '0 0 16px 0 rgba(15,41,131,0.10)',
  '@select-shadow': '0 2px 10px 0 rgba(15, 41, 131, 0.2)',
  '@message-shadow': '0 0 16px 0 rgba(15,41,131,0.10)',


  // 文字
  '@font-family': 'Alibaba-PuHuiTi-Regular, Helvetica Neue, Helvetica, Arial, PingFang SC, Hiragino Sans GB, Microsoft YaHei, sans-serif',
  '@font-size-sm': '12px',
  '@font-size-base': '12px',
  '@font-size-lg': '14px',
  '@text-color': '#2D3144', // '#252934',
  '@text-color-secondary': '#4C5868', // '#6B798E',
  '@text-color-inverse': '#E1E4E8',

  // Alert
  '@alert-success-border-color': 'tint(@success-color, 50%)',
  '@alert-success-bg-color': 'tint(@success-color, 95%)',
  '@alert-success-icon-color': '@success-color',
  '@alert-info-border-color': 'tint(@info-color, 50%)',
  '@alert-info-bg-color': 'tint(@info-color, 95%)',
  '@alert-info-icon-color': '@info-color',
  '@alert-warning-border-color': 'tint(@warning-color, 50%)',
  '@alert-warning-bg-color': 'tint(@warning-color, 95%)',
  '@alert-warning-icon-color': '@warning-color',
  '@alert-error-border-color': 'tint(@error-color, 50%)',
  '@alert-error-bg-color': 'tint(@error-color, 95%)',
  '@alert-error-icon-color': '@error-color',

  // Button
  '@btn-height-base': '28px',
  '@btn-height-lg': '32px',
  '@btn-height-sm': '24px',
  '@btn-font-weight': 500,
  '@btn-shadow': 'none',
  '@btn-text-shadow': 'none',
  '@btn-primary-shadow': 'none',

  // Rate
  '@rate-star-color': '@warning-color',
  '@rate-star-bg': '@border-color-base',

  // Checkbox
  '@checkbox-size': '14px',

  // Card
  '@card-padding-base': '20px',
  '@card-head-padding': '12px',
  '@card-head-background': '@normal-color',

  // Tab
  '@tabs-card-head-background': '@normal-color',
  '@tabs-hover-color': '@primary-color',
  '@tabs-active-color': '@primary-color',

  // Input
  '@input-height-base': '28px',
  '@input-height-lg': '32px',
  '@input-height-sm': '24px',
  '@input-placeholder-color': '@disabled-color',

  // Tag
  '@tag-default-bg': '@component-background',
  '@tag-default-color': '@text-color-secondary',

  // Table
  '@table-row-hover-bg': '@item-hover-bg',
  '@table-header-color': '@text-color',
  '@table-selected-row-bg': '@component-background',
  '@table-header-bg': '@normal-color',
  '@table-body-sort-bg': '@normal-color',
  '@table-selected-row-hover-bg': '@item-hover-bg',
  '@table-body-selected-sort-bg': '@item-active-bg',

  // Radio
  '@radio-button-color': '@text-color',
  '@radio-button-hover-color': '@primary-color',
  '@radio-button-active-color': '@primary-color',
  '@radio-group-solid-active-background': '@active-background',

  // Select
  '@select-item-selected-font-weight': 500,

  // Modal
  '@modal-body-padding': '20px',
  '@modal-heading-color': '@text-color',
  '@modal-header-bg': '@normal-color',
  '@modal-mask-bg': 'fade(@black, 50%)',

  // Layout
  '@layout-body-background': '@body-background',
  '@layout-header-background': '#131F3E',
  '@layout-footer-background': 'transparent',
  '@layout-header-height': '70px',
  '@layout-header-padding': '0',
  '@layout-footer-padding': '0',
  '@layout-sider-background': '@body-background',

  // Menu
  '@menu-bg': 'transparent',
  '@menu-icon-size': '@font-size-lg',
  '@menu-item-active-border-width': '0',
  '@menu-item-vertical-margin': '0',
  '@menu-item-boundary-margin': '0',

  // Collapse
  '@collapse-header-padding': '10px 16px',
  '@collapse-header-bg': '@component-background',
  '@collapse-content-padding': '12px',

  // Drawer
  '@drawer-header-padding': '12px 20px',
  '@drawer-body-padding': '12px 20px',

  // Form
  '@label-color': '@text-color-secondary',

  // PageHeader
  '@page-header-padding': '20px',
  '@page-header-padding-vertical': '14px',
  '@page-header-back-color': '@text-color-secondary',

  // Pagination
  '@pagination-item-size': '32px',
  '@pagination-font-weight-active': 500,
  '@pagination-font-family': 'Alibaba-PuHuiTi-Regular Arial',

  // Typography
  '@typography-title-font-weight': 500
};