ll-package/assets/styles/theme.less

// 一、root定义变量
:root {
  // 2.成功色
  --color-success: #52c41a; // 成功色

  // 3.警戒色
  --color-warning: #faad14; // 警戒色

  // 4.错误色
  --color-error: #ff4d4f; // 错误色

  // 5.信息色
  --color-info: #1187ff; // 信息色

  // 6.中性色
  // 6.1文本色
  /* stylelint-disable-next-line comment-empty-line-before */
  /**
  * 一级文本色: 最深的文本色。为了符合W3C标准，默认的文本颜色使用了该色，同时这个颜色也是最深的中性色。
  * 二级文本色: 作为第二梯度的文本色，一般用在不那么需要强化文本颜色的场景，例如 Label 文本、Menu 的文本选中态等场景。
  * 三级文本色: 第三级文本色一般用于描述性文本，例如表单的中的补充说明文本、列表的描述性文本等场景。
  * 四级文本色: 第四级文本色是最浅的文本色，例如表单的输入提示文本、禁用色文本等。
  **/
  --color-text-base: #000;
  --color-text: rgba(0, 0, 0, 88%); // 一级文本色
  --color-text-secondary: rgba(0, 0, 0, 65%); // 二级文本色
  --color-text-tertiary: rgba(0, 0, 0, 45%); // 三级文本色
  --color-text-quaternary: rgba(0, 0, 0, 25%); // 四级文本色

  // 6.2描边
  --color-border: #d9d9d9; // 一级边框色,默认使用的边框颜色, 用于分割不同的元素，例如：表单的分割线、卡片的分割线等。
  --color-border-secondary: #f0f0f0; // 二级边框色,比默认使用的边框色要浅一级，此颜色和 colorSplit 的颜色一致。使用的是实色。
  --color-split: rgba(0, 0, 0, 6%); // 分割线颜色

  // 6.3填充
  /* stylelint-disable-next-line comment-empty-line-before */
  /**
  * 一级填充色: 最深的填充色，用于拉开与二、三级填充色的区分度，目前只用在 Slider 的 hover 效果。
  * 二级填充色: 二级填充色可以较为明显地勾勒出元素形体，如 Rate、Skeleton 等。也可以作为三级填充色的 Hover 状态，如 Table 等。
  * 三级填充色: 三级填充色用于勾勒出元素形体的场景，如 Slider、Segmented 等。如无强调需求的情况下，建议使用三级填色作为默认填色。
  * 四级填充色：最弱一级的填充色，适用于不易引起注意的色块，例如斑马纹、区分边界的色块等。
  **/
  --color-fill: rgba(0, 0, 0, 15%); // 一级填充色
  --color-fill-secondary: rgba(0, 0, 0, 6%); // 二级填充色
  --color-fill-tertiary: rgba(0, 0, 0, 4%); // 三级填充色
  --color-fill-quaternary: rgba(0, 0, 0, 2%); // 四级填充色

  // 6.4背景
  --color-bg-base: #fff;
  --color-bg-container: #fff; // 组件容器背景色
  --color-bg-elevated: #fff; // 浮层容器背景色
  --color-bg-layout: #f5f5f5; // 布局背景色
  --color-bg-spotlight: rgba(0, 0, 0, 85%); // 引起注意的背景色
  --color-bg-mask: rgba(0, 0, 0, 45%); // 浮层的背景蒙层颜色

  // 6.5浮层容器
  --control-item-bg-hover: #f4f4f4; // 悬浮背景色
  // 6.6控制容器轮廓线颜色
  --control-outline: rgba(238, 38, 5, 6%);

  // 7.其他组件变量
  // 7.1layout布局
  --main-bg-color: #f4f7fd; // 内容区域背景颜色
  // 7.2layou左侧
  --submenu-bg-color: #fff;
  --menu-search-bg-color: #f6f6f6;
  --menu-border-color: #f0f0f0;
  --menu-button-icon-hover: var(--color-primary-hover); // 快捷菜单、展开/折叠icon

  --menu-button-icon-hover-bg: rgba(0, 0, 0, 6%);
  // 7.3layou头部
  --collect-icon-color: #faad14; // 收藏图标颜色
  --header-icon-color: rgba(0, 0, 0, 65%);
  // 7.4主题/设置弹窗
  --setting-bg-color: #f4f5f7;
  --setting-modal-bg-color: #fff;
  // 7.5超链接
  // --a-link-color: var();

  // 8.icon
  // 8.1灰色图标
  --default-icon: rgba(0, 0, 0, 45%); // 默认颜色
  --default-icon-hover: var(--color-primary-hover); // 悬停颜色
  --default-icon-hover-bg: rgba(0, 0, 0, 6%); // 悬停背景色
  --default-icon-active: var(--color-primary-active); // 选中颜色
  --default-icon-disable: rgba(0, 0, 0, 25%); // 禁用颜色

  // 8.2蓝色的icon主题
  --primary-icon: var(--color-primary); // 默认icon颜色
  --primary-icon-hover: var(--color-primary-hover); // 图标悬停颜色
  --primary-icon-active: var(--color-primary-active); // 图标选中颜色
  --primary-icon-disabled: rgba(0, 0, 0, 25%); // 图标禁用颜色

  // 9.滚动条样式
  --scroll-color: rgba(0, 0, 0, 25%);

  // 10.组件相关
  // 10.1LlDescriptions
  --detail-descriptions-label-bg-color: #fafafa; // type=detail下的LlDescriptions的label背景颜色
}

// 二.主题类名定义
// 2.科技蓝
.technology-blue {
  // 1、品牌色
  --color-primary-bg: #f0f9ff; // 主色显色背景色(选中背景色)
  --color-primary-bg-hover: #b5e4ff; // 主色显色背景色悬浮
  --color-primary-border: #8cd1ff; // 主色描边色(也是禁用颜色)
  --color-primary-border-hover: #63bcff; // 主色描边色悬浮态
  --color-primary-hover: #3ba3ff; // 主色悬浮态
  --color-primary: #1187ff; // 品牌主色
  --color-primary-active: #0467d9; // 主色激活态
  --color-primary-text-hover: #3ba3ff; // 主色文本悬浮态
  --color-primary-text: #1187ff; // 主色文本
  --color-primary-text-active: #0467d9; //  主色激活态
  // 2.信息色
  --color-info: #1187ff; // 信息色
}

// 2.2暗青
.cyan-blue {
  // 1、品牌色
  --color-primary-bg: #f0f9ff; // 主色显色背景色(选中背景色)
  --color-primary-bg-hover: #ebfaf8; // 主色显色背景色悬浮
  --color-primary-border: #dfedec; // 主色描边色(也是禁用颜色)
  --color-primary-border-hover: #afe0de; // 主色描边色悬浮态
  --color-primary-hover: #83d4d2; // 主色悬浮态
  --color-primary: #5bc5c7; // 品牌主色
  --color-primary-active: #429ca1; // 主色激活态
  --color-primary-text-hover: #83d4d2; // 主色文本悬浮态
  --color-primary-text: #5bc5c7; // 主色文本
  --color-primary-text-active: #429ca1; //  主色激活态
  // 2.信息色
  --color-info: #5bc5c7; // 信息色
  // 7.1layout布局
  --main-bg-color: #f4f7fd; // 内容区域背景颜色

  // 8.icon
  // 8.1灰色图标(协调全局蓝色)
  // --default-icon: rgba(0, 0, 0, 0.45); // 默认颜色
  // --default-icon-hover: #3ba3ff; // 悬停颜色
  // --default-icon-hover-bg: rgba(0, 0, 0, 0.06); // 悬停背景色
  // --default-icon-active: #0467d9; // 选中颜色
  // --default-icon-disable: rgba(0, 0, 0, 0.25); // 禁用颜色

  // 8.2蓝色的icon主题
  // --primary-icon: #1187ff; // 默认icon颜色
  // --primary-icon-hover: #3ba3ff; // 图标悬停颜色
  // --primary-icon-active: #0467d9; // 图标选中颜色
  // --primary-icon-disabled: rgba(0, 0, 0, 0.25); // 图标禁用颜色
}

.dark {
  // 1、品牌色
  --color-primary-bg: #111d2c; // 主色显色背景色(选中背景色)
  --color-primary-bg-hover: #102945; // 主色显色背景色悬浮
  --color-primary-border: #13375b; // 主色描边色(也是禁用颜色)
  --color-primary-border-hover: #13487e; // 主色描边色悬浮态
  --color-primary-hover: #3795e8; // 主色悬浮态
  --color-primary: #1176dc; // 品牌主色
  --color-primary-active: #125fad; // 主色激活态
  --color-primary-text-hover: #3795e8; // 主色文本悬浮态
  --color-primary-text: #1176dc; // 主色文本
  --color-primary-text-active: #125fad; //  主色激活态
  --dark-color-primary: #1187ff; // 暗黑算法主色计算值（解决icon颜色不一致）

  // 2.成功色
  --color-success: #49aa19; // 信息色
  // 3.警戒色
  --color-warning: #d89614; // 警戒色
  // 4.错误色
  --color-error: #dc4446; // 错误色
  // 5.信息色
  --color-info: #1176dc; // 信息色
  // 6.中性色
  // 6.1文本颜色
  --color-text-base: #fff;
  --color-text: rgba(255, 255, 255); // 一级文本色
  --color-text-secondary: rgba(255, 255, 255, 75%); // 二级文本色
  --color-text-tertiary: rgba(255, 255, 255, 45%); // 三级文本色
  --color-text-quaternary: rgba(255, 255, 255, 25%); // 四级文本色
  // 6.2描边
  --color-border: #424242; // 一级边框色,默认使用的边框颜色, 用于分割不同的元素，例如：表单的分割线、卡片的分割线等。
  --color-border-secondary: #303030; // 二级边框色,比默认使用的边框色要浅一级，此颜色和 colorSplit 的颜色一致。使用的是实色。
  --color-split: rgba(255, 255, 255, 12%); // 分割线颜色
  // 6.3填充
  --color-fill: rgba(255, 255, 255, 18%); // 一级填充色
  --color-fill-secondary: rgba(255, 255, 255, 12%); // 二级填充色
  --color-fill-tertiary: rgba(255, 255, 255, 8%); // 三级填充色
  --color-fill-quaternary: rgba(255, 255, 255, 4%); // 四级填充色

  // 6.4背景
  --color-bg-base: #000;
  --color-bg-container: #141414; // 组件容器背景色
  --color-bg-elevated: #1f1f1f; // 浮层容器背景色
  --color-bg-layout: #000; // 布局背景色
  --color-bg-spotlight: #424242; // 引起注意的背景色
  --color-bg-mask: rgba(0, 0, 0, 45%); // 浮层的背景蒙层颜色

  // 6.5浮层容器
  --control-item-bg-hover: rgba(255, 255, 255, 15%); // 悬浮背景色
  // 6.6控制容器轮廓线颜色
  --control-outline: rgba(238, 38, 56, 11%);
  // 7.其他组件变量
  // 7.1layout布局
  --main-bg-color: transparent; // 内容区域背景颜色
  // 7.2layou左侧
  --submenu-bg-color: #141414;
  --menu-search-bg-color: #000;
  --menu-border-color: #303030;
  --menu-button-icon-hover: var(--color-primary-hover); // 快捷菜单、展开/折叠icon

  --menu-button-icon-hover-bg: rgba(255, 255, 255, 15%);
  // 7.3layou头部
  --collect-icon-color: var(--default-icon); // 收藏图标颜色
  --header-icon-color: rgba(255, 255, 255, 75%);
  // 7.4主题/设置弹窗
  --setting-bg-color: #1f1f1f;
  --setting-modal-bg-color: #1f1f1f;

  // 8.icon
  // 灰色图标
  --default-icon: rgba(255, 255, 255, 75%); // 默认颜色
  --default-icon-disable: rgba(255, 255, 255, 25%); // 禁用颜色

  // 9.滚动条样式
  --scroll-color: rgba(255, 255, 255, 25%);

  // 10.组件相关
  // 10.1LlDescriptions
  --detail-descriptions-label-bg-color: rgba(255, 255, 255, 4%) // type=detail下的LlDescriptions的label背景颜色
  ;
}

// 3.组件相关类名定义
// layouts的LayoutSider二级和三级菜单样式
.ant-menu-submenu.ant-menu-submenu-popup {
  .ant-menu-submenu.ant-menu-submenu-vertical.ll-menu-sub {
    .ant-menu-submenu-title {
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 100%;

      .ll-icon {
        margin-left: 20px;
      }
    }
  }
}

// dropdown主题样式
.ant-dropdown {
  .ant-dropdown-menu {
    .ant-dropdown-menu-item {
      margin-bottom: 4px;
    }

    :last-child {
      margin-bottom: 0 !important;
    }
  }
}

// select主题样式
.ant-select {
  &:hover {
    .ant-select-selector {
      border-color: var(--color-primary-hover) !important;
    }
  }
}

// select、cascader下拉主题样式
.ant-select-dropdown {

  .ant-select-item-option-selected,
  .ant-cascader-menu-item-active {
    color: var(--color-primary) !important;
  }

  .ant-cascader-menu {
    .ant-cascader-menu-item {
      margin-bottom: 4px;
    }

    :last-child {
      margin-bottom: 0 !important;
    }
  }
}

// 下拉select-item间距
.rc-virtual-list-holder-inner {
  .ant-select-item {
    margin-bottom: 4px;
  }

  :last-child {
    margin-bottom: 0 !important;
  }
}

// datePicker主题样式
// datePicker下拉主题样式
.ant-picker-dropdown {
  .ant-picker-cell-selected {
    .ant-picker-cell-inner {
      background-color: var(--color-primary) !important;
    }
  }
}