@bee-design/ui/es/style/theme/css-variables.less

Bee Design React UI Library.

@import './color/css-variables.less';

@{bee-theme-tag} {
  @{bee-cssvars-prefix}-color-white: @color-white;
  @{bee-cssvars-prefix}-color-black: @color-black;
  @{bee-cssvars-prefix}-color-border: @color-border;
  @{bee-cssvars-prefix}-color-bg-popup: @color-bg-popup;
  @{bee-cssvars-prefix}-color-bg-1: @color-bg-1;
  @{bee-cssvars-prefix}-color-bg-2: @color-bg-2;
  @{bee-cssvars-prefix}-color-bg-3: @color-bg-3;
  @{bee-cssvars-prefix}-color-bg-4: @color-bg-4;
  @{bee-cssvars-prefix}-color-bg-5: @color-bg-5;
  @{bee-cssvars-prefix}-color-bg-white: @color-bg-white;
  @{bee-cssvars-prefix}-color-neutral-1: rgb(var(~'@{bee-cssvars-prefix}-gray-1'));
  @{bee-cssvars-prefix}-color-neutral-2: rgb(var(~'@{bee-cssvars-prefix}-gray-2'));
  @{bee-cssvars-prefix}-color-neutral-3: rgb(var(~'@{bee-cssvars-prefix}-gray-3'));
  @{bee-cssvars-prefix}-color-neutral-4: rgb(var(~'@{bee-cssvars-prefix}-gray-4'));
  @{bee-cssvars-prefix}-color-neutral-5: rgb(var(~'@{bee-cssvars-prefix}-gray-5'));
  @{bee-cssvars-prefix}-color-neutral-6: rgb(var(~'@{bee-cssvars-prefix}-gray-6'));
  @{bee-cssvars-prefix}-color-neutral-7: rgb(var(~'@{bee-cssvars-prefix}-gray-7'));
  @{bee-cssvars-prefix}-color-neutral-8: rgb(var(~'@{bee-cssvars-prefix}-gray-8'));
  @{bee-cssvars-prefix}-color-neutral-9: rgb(var(~'@{bee-cssvars-prefix}-gray-9'));
  @{bee-cssvars-prefix}-color-neutral-10: rgb(var(~'@{bee-cssvars-prefix}-gray-10'));
  @{bee-cssvars-prefix}-color-text-1: @color-text-1;
  @{bee-cssvars-prefix}-color-text-2: @color-text-2;
  @{bee-cssvars-prefix}-color-text-3: @color-text-3;
  @{bee-cssvars-prefix}-color-text-4: @color-text-4;
  @{bee-cssvars-prefix}-color-border-1: @color-border-1;
  @{bee-cssvars-prefix}-color-border-2: @color-border-2;
  @{bee-cssvars-prefix}-color-border-3: @color-border-3;
  @{bee-cssvars-prefix}-color-border-4: @color-border-4;
  @{bee-cssvars-prefix}-color-fill-1: @color-fill-1;
  @{bee-cssvars-prefix}-color-fill-2: @color-fill-2;
  @{bee-cssvars-prefix}-color-fill-3: @color-fill-3;
  @{bee-cssvars-prefix}-color-fill-4: @color-fill-4;
  @{bee-cssvars-prefix}-color-primary-light-1: @color-primary-light-1;
  @{bee-cssvars-prefix}-color-primary-light-2: @color-primary-light-2;
  @{bee-cssvars-prefix}-color-primary-light-3: @color-primary-light-3;
  @{bee-cssvars-prefix}-color-primary-light-4: @color-primary-light-4;
  @{bee-cssvars-prefix}-color-secondary: @color-secondary;
  @{bee-cssvars-prefix}-color-secondary-hover: @color-secondary-hover;
  @{bee-cssvars-prefix}-color-secondary-active: @color-secondary-active;
  @{bee-cssvars-prefix}-color-secondary-disabled: @color-secondary-disabled;
  @{bee-cssvars-prefix}-color-danger-light-1: @color-danger-light-1;
  @{bee-cssvars-prefix}-color-danger-light-2: @color-danger-light-2;
  @{bee-cssvars-prefix}-color-danger-light-3: @color-danger-light-3;
  @{bee-cssvars-prefix}-color-danger-light-4: @color-danger-light-4;
  @{bee-cssvars-prefix}-color-success-light-1: @color-success-light-1;
  @{bee-cssvars-prefix}-color-success-light-2: @color-success-light-2;
  @{bee-cssvars-prefix}-color-success-light-3: @color-success-light-3;
  @{bee-cssvars-prefix}-color-success-light-4: @color-success-light-4;
  @{bee-cssvars-prefix}-color-warning-light-1: @color-warning-light-1;
  @{bee-cssvars-prefix}-color-warning-light-2: @color-warning-light-2;
  @{bee-cssvars-prefix}-color-warning-light-3: @color-warning-light-3;
  @{bee-cssvars-prefix}-color-warning-light-4: @color-warning-light-4;
  @{bee-cssvars-prefix}-color-link-light-1: @color-link-light-1;
  @{bee-cssvars-prefix}-color-link-light-2: @color-link-light-2;
  @{bee-cssvars-prefix}-color-link-light-3: @color-link-light-3;
  @{bee-cssvars-prefix}-color-link-light-4: @color-link-light-4;

  // radius
  @{bee-cssvars-prefix}-border-radius-none: @border-radius-none;
  @{bee-cssvars-prefix}-border-radius-small: @border-radius-small;
  @{bee-cssvars-prefix}-border-radius-medium: @border-radius-medium;
  @{bee-cssvars-prefix}-border-radius-large: @border-radius-large;
  @{bee-cssvars-prefix}-border-radius-circle: @border-radius-circle;
  // component
  @{bee-cssvars-prefix}-color-tooltip-bg: @color-tooltip-bg;
  @{bee-cssvars-prefix}-color-spin-layer-bg: @color-spin-layer-bg;
  @{bee-cssvars-prefix}-color-menu-dark-bg: @color-menu-dark-bg;
  @{bee-cssvars-prefix}-color-menu-light-bg: @color-menu-light-bg;
  @{bee-cssvars-prefix}-color-menu-dark-hover: @color-menu-dark-hover;
  @{bee-cssvars-prefix}-color-mask-bg: @mask-color-bg;
}

@{bee-theme-tag} {
  &[bee-theme='dark'] {
    @{bee-cssvars-prefix}-color-white: @dark-color-white; // 在亮色模式下所有白色文字对应。对应 @color-white;
    @{bee-cssvars-prefix}-color-black: @dark-color-black;
    @{bee-cssvars-prefix}-color-border: @dark-color-border;
    @{bee-cssvars-prefix}-color-bg-1: @dark-color-bg-1; // 整体背景，就是 @dark-gray-1
    @{bee-cssvars-prefix}-color-bg-2: @dark-color-bg-2; // 一级容器背景 (“白色”)
    @{bee-cssvars-prefix}-color-bg-3: @dark-color-bg-3; // 二级容器背景
    @{bee-cssvars-prefix}-color-bg-4: @dark-color-bg-4; // 三级容器背景
    @{bee-cssvars-prefix}-color-bg-5: @dark-color-bg-5; // 下拉框、Tooltips 背景
    @{bee-cssvars-prefix}-color-bg-white: @dark-color-bg-white; // 在亮色模式下 radio，switch 白色背景
    @{bee-cssvars-prefix}-color-text-1: @dark-color-text-1; // 标题，正文
    @{bee-cssvars-prefix}-color-text-2: @dark-color-text-2; // 语句
    @{bee-cssvars-prefix}-color-text-3: @dark-color-text-3; // 次要信息
    @{bee-cssvars-prefix}-color-text-4: @dark-color-text-4; // 禁用态
    @{bee-cssvars-prefix}-color-fill-1: @dark-color-fill-1;
    @{bee-cssvars-prefix}-color-fill-2: @dark-color-fill-2;
    @{bee-cssvars-prefix}-color-fill-3: @dark-color-fill-3;
    @{bee-cssvars-prefix}-color-fill-4: @dark-color-fill-4;
    @{bee-cssvars-prefix}-color-primary-light-1: @dark-color-primary-light-1;
    @{bee-cssvars-prefix}-color-primary-light-2: @dark-color-primary-light-2;
    @{bee-cssvars-prefix}-color-primary-light-3: @dark-color-primary-light-3;
    @{bee-cssvars-prefix}-color-primary-light-4: @dark-color-primary-light-4;
    @{bee-cssvars-prefix}-color-secondary: @dark-color-secondary;
    @{bee-cssvars-prefix}-color-secondary-hover: @dark-color-secondary-hover;
    @{bee-cssvars-prefix}-color-secondary-active: @dark-color-secondary-active;
    @{bee-cssvars-prefix}-color-secondary-disabled: @dark-color-secondary-disabled;
    @{bee-cssvars-prefix}-color-danger-light-1: @dark-color-danger-light-1;
    @{bee-cssvars-prefix}-color-danger-light-2: @dark-color-danger-light-2;
    @{bee-cssvars-prefix}-color-danger-light-3: @dark-color-danger-light-3;
    @{bee-cssvars-prefix}-color-danger-light-4: @dark-color-danger-light-4;
    @{bee-cssvars-prefix}-color-success-light-1: @dark-color-success-light-1;
    @{bee-cssvars-prefix}-color-success-light-2: @dark-color-success-light-2;
    @{bee-cssvars-prefix}-color-success-light-3: @dark-color-success-light-3;
    @{bee-cssvars-prefix}-color-success-light-4: @dark-color-success-light-4;
    @{bee-cssvars-prefix}-color-warning-light-1: @dark-color-warning-light-1;
    @{bee-cssvars-prefix}-color-warning-light-2: @dark-color-warning-light-2;
    @{bee-cssvars-prefix}-color-warning-light-3: @dark-color-warning-light-3;
    @{bee-cssvars-prefix}-color-warning-light-4: @dark-color-warning-light-4;
    @{bee-cssvars-prefix}-color-link-light-1: @dark-color-link-light-1;
    @{bee-cssvars-prefix}-color-link-light-2: @dark-color-link-light-2;
    @{bee-cssvars-prefix}-color-link-light-3: @dark-color-link-light-3;
    @{bee-cssvars-prefix}-color-link-light-4: @dark-color-link-light-4;
    // component
    @{bee-cssvars-prefix}-color-tooltip-bg: @dark-color-tooltip-bg;
    @{bee-cssvars-prefix}-color-spin-layer-bg: @dark-color-spin-layer-bg;
    @{bee-cssvars-prefix}-color-menu-dark-bg: @color-menu-dark-bg;
    @{bee-cssvars-prefix}-color-menu-light-bg: @color-menu-dark-bg;
    @{bee-cssvars-prefix}-color-menu-dark-hover: @dark-color-menu-dark-hover;
    @{bee-cssvars-prefix}-color-mask-bg: @dark-mask-color-bg;
  }
}