shineout/css/utils/vars-inject.ts

Shein 前端组件库

import { darken, fade } from './color'
import { set as configSet } from '../config'
import { entries } from './objects'
import { isFunc } from './is'
import hash from './hash'

import { paginationClass } from '../Pagination/styles'
import { checkinputClass } from '../Checkbox/styles'
import { buttonClass } from '../Button/styles'
import { selectClass } from '../Select/styles'
import { formClass } from '../Form/styles'
import { menuClass } from '../Menu/styles'
import { alertClass } from '../Alert/styles'
import { messageClass } from '../Message/styles'
import { modalClass } from '../Modal/styles'
import { popoverClass } from '../Popover/styles'
import { datepickerClass } from '../DatePicker/styles'
import { dropdownClass } from '../Dropdown/styles'
import { inputClass } from '../Input/styles'
import { cardClass } from '../Card/styles'
import { tooltipClass } from '../Tooltip/styles'
import { sliderClass } from '../Slider/styles'
import { tagClass } from '../Tag/styles'
import { exposeClass } from '../styles/expose'
import { CartType } from '../icons/Props'
import { ObjectType } from '../@types/common'

export interface ThemeConfig {
  /**
   * 'body': 作为 body 标签的内联样式； 'tag': 作为style标签插入
   */
  injectType: 'body' | 'tag'
  /**
   * 作用的元素; 当 injectType 为 'tag' 时必须传入string
   */
  target?: string | HTMLElement | (() => HTMLElement)
}
const config: ThemeConfig = {
  injectType: 'body',
  target: undefined,
}
const computedCache: ObjectType = {}
let styleObj: ObjectType = {}

export function setThemeConfig(c: Partial<ThemeConfig>) {
  Object.keys(c).forEach((key: keyof ThemeConfig) => {
    if (key in config) {
      // @ts-ignore
      config[key] = c[key]
    }
  })
}
export function getThemeConfig(name: keyof ThemeConfig) {
  return config[name]
}
export function getThemeTarget() {
  let { target } = config
  if (!target) return document.body
  if (isFunc(target)) {
    target = target()
  } else if (typeof target === 'string') {
    target = document.querySelector(target) as HTMLElement
  }
  if (target instanceof HTMLElement) return target
  console.error(`can not find theme target dom from "${config.target}"`)
  return document.body
}

export function cleanStyleObj() {
  styleObj = {}
}

export function injectTag(custom = {}) {
  if (config.target && typeof config.target !== 'string') {
    console.error('The target of themeConfig must use string when injectType = "tag"')
  }
  const selector = config.target || 'body'
  const id = `__shineoutThemeStyleContainer__${hash(selector)}`
  const varObj: any = { ...styleObj, ...custom }
  const styleText = `${selector}{${Object.keys(varObj)
    .map(key => `${key}: ${varObj[key]}`)
    .join(';')}}`
  const el = document.getElementById(id)
  if (el) {
    el.innerText = styleText
  } else {
    const stylee = document.createElement('style')
    stylee.setAttribute('type', 'text/css')
    stylee.setAttribute('id', id)
    stylee.innerText = styleText
    document.head.appendChild(stylee)
  }
  return id
}

function getProperty(name = '--btn-hover-darken', cache = true) {
  if (cache && computedCache[name]) return computedCache[name]
  computedCache[name] = getComputedStyle(document.body)
    .getPropertyValue(name)
    .trim()
  return computedCache[name]
}

function setBodyProperty(colors: { [x: string]: any }, value?: string | number) {
  for (const [cssVar, cssValue] of entries(colors)) {
    if (config.injectType === 'body') {
      const target = getThemeTarget()
      if (value === undefined) {
        target.style.removeProperty(cssVar)
      } else {
        target.style.setProperty(cssVar, cssValue)
      }
    }
    if (config.injectType === 'tag') {
      if (value === undefined) {
        delete styleObj[cssVar]
      } else {
        styleObj[cssVar] = cssValue
      }
    }
  }
}
const injects = {
  color: {
    info: {
      title: 'Color 颜色',
      name: 'color',
      path: 'Button',
    },
    conf: [
      {
        name: 'primary',
        type: 'color',
        attr: 'backgroundColor',
        className: buttonClass('primary'),
        desc: '主色',
      },
      {
        name: 'infoColor',
        type: 'color',
        attr: 'backgroundColor',
        className: buttonClass('info'),
      },
      {
        name: 'warning',
        type: 'color',
        attr: 'backgroundColor',
        className: buttonClass('warning'),
      },
      {
        name: 'danger',
        type: 'color',
        attr: 'backgroundColor',
        className: buttonClass('danger'),
      },
      {
        name: 'secondary',
        type: 'color',
        attr: 'backgroundColor',
        className: buttonClass('secondary'),
      },
      {
        name: 'success',
        type: 'color',
        attr: 'backgroundColor',
        className: buttonClass('success'),
      },
      {
        name: 'gray100',
        type: 'color',
        attr: 'color',
        desc: 'Form, Datepicker, Cascader, Tree, Card, Upload, Pagination, Select',
        className: exposeClass('gray-100'),
      },
      {
        name: 'gray200',
        type: 'color',
        attr: 'color',
        desc: 'Form, Datepicker, Cascader, Alert, Tabs, Progress',
        className: exposeClass('gray-200'),
      },
      {
        name: 'gray300',
        type: 'color',
        attr: 'color',
        desc: 'Button, Card, Cascader, Upload, Image, Tooltip',
        className: exposeClass('gray-300'),
      },
      {
        name: 'gray400',
        type: 'color',
        attr: 'color',
        desc: 'Cascader, Select, TreeSelect, Slider, Upload, Input, Rate',
        className: exposeClass('gray-400'),
      },
      {
        name: 'gray500',
        type: 'color',
        attr: 'color',
        desc: 'Cascader, Select, Table, TreeSelect, Checkbox, Slider, Tree',
        className: exposeClass('gray-500'),
      },
      {
        name: 'gray600',
        type: 'color',
        attr: 'color',
        desc: 'Select, Datepicker, TreeSelect, Link-disabled, Table, Pagination, Tree',
        className: exposeClass('gray-600'),
      },
      {
        name: 'gray700',
        type: 'color',
        attr: 'color',
        desc: 'Table sort icon hover color',
        className: exposeClass('gray-700'),
      },
      {
        name: 'gray800',
        type: 'color',
        attr: 'color',
        desc: 'Dropdown, Card, Dropdown',
        className: exposeClass('gray-800'),
      },
      {
        name: 'gray900',
        type: 'color',
        attr: 'color',
        desc: 'text color, Menu',
        className: exposeClass('gray-900'),
      },
    ],
    set primary(v: string) {
      setBodyProperty(
        {
          '--primary-color': v,
          '--primary-color-dark-5': darken(v, 5),
          '--primary-color-dark-15': darken(v, 15),
          '--primary-color-dark-btn-hover': darken(v, getProperty()),
          '--primary-color-lighten-40': darken(v, -40),
          '--primary-color-fade-60': fade(v, 0.6),
          '--primary-color-fade-50': fade(v, 0.5),
          '--primary-color-fade-10': fade(v, 0.1),
          '--primary-color-fade-5': fade(v, 0.05),
          '--primary-color-fade-0': fade(v, 0),
          '--primary-color-dark-5_fade-60': fade(darken(v, 5), 0.6),
          '--primary-color-dark-5_fade-0': fade(darken(v, 5), 0),
        },
        v
      )
    },
    set infoColor(v: string) {
      setBodyProperty(
        {
          '--info-color': v,
          '--info-color-dark-5': darken(v, 5),
          '--info-color-fade-60': fade(v, 0.6),
          '--info-color-dark-5_fade-60': fade(darken(v, 5), 0.6),
          '--info-color-fade-0': fade(v, 0),
          '--info-color-dark-5_fade-0': fade(darken(v, 5), 0),
          '--info-color-dark-btn-hover': darken(v, getProperty()),
        },
        v
      )
    },
    set warning(v: string) {
      setBodyProperty(
        {
          '--warning-color': v,
          '--warning-color-dark-5': darken(v, 5),
          '--warning-color-fade-60': fade(v, 0.6),
          '--warning-color-dark-5_fade-60': fade(darken(v, 5), 0.6),
          '--warning-color-fade-0': fade(v, 0),
          '--warning-color-dark-5_fade-0': fade(darken(v, 5), 0),
          '--warning-color-dark-btn-hover': darken(v, getProperty()),
        },
        v
      )
    },
    set danger(v: string) {
      setBodyProperty(
        {
          '--danger-color': v,
          '--danger-color-fade-25': fade(v, 0.25),
          '--danger-color-dark-5': darken(v, 5),
          '--danger-color-fade-60': fade(v, 0.6),
          '--danger-color-dark-5_fade-60': fade(darken(v, 5), 0.6),
          '--danger-color-fade-0': fade(v, 0),
          '--danger-color-dark-5_fade-0': fade(darken(v, 5), 0),
          '--danger-color-dark-btn-hover': darken(v, getProperty()),
        },
        v
      )
    },
    set success(v: string) {
      setBodyProperty(
        {
          '--success-color': v,
          '--success-color-dark-5': darken(v, 5),
          '--success-color-fade-60': fade(v, 0.6),
          '--success-color-dark-5_fade-60': fade(darken(v, 5), 0.6),
          '--success-color-fade-0': fade(v, 0),
          '--success-color-dark-5_fade-0': fade(darken(v, 5), 0),
          '--success-color-dark-btn-hover': darken(v, getProperty()),
        },
        v
      )
    },
    set secondary(v: string) {
      setBodyProperty(
        {
          '--secondary-color': v,
          '--secondary-color-dark-5': darken(v, 5),
          '--secondary-color-dark-btn-hover': darken(v, getProperty()),
          '--secondary-color-dark-5_fade-60': fade(darken(v, 5), 0.6),
          '--secondary-color-dark-5_fade-0': fade(darken(v, 5), 0),
        },
        v
      )
    },
    set gray100(v: string) {
      setBodyProperty(
        {
          '--gray-100': v,
        },
        v
      )
    },
    set gray200(v: string) {
      setBodyProperty(
        {
          '--gray-200': v,
          '--gray-200-darken-5': darken(v, 5),
        },
        v
      )
    },
    set gray300(v: string) {
      setBodyProperty(
        {
          '--gray-300': v,
          '--gray-300-darken-hover': darken(v, getProperty()),
          '--gray-300-fade-60': fade(v, 0.6),
          '--gray-300-fade-0': fade(v, 0),
        },
        v
      )
    },
    set gray400(v: string) {
      setBodyProperty(
        {
          '--gray-400': v,
          '--gray-400-darken-20': darken(v, 20),
        },
        v
      )
    },
    set gray500(v: string) {
      setBodyProperty(
        {
          '--gray-500': v,
        },
        v
      )
    },
    set gray600(v: string) {
      setBodyProperty(
        {
          '--gray-600': v,
          '--gray-600-lighten-15': darken(v, -15),
        },
        v
      )
    },
    set gray700(v: string) {
      setBodyProperty(
        {
          '--gray-700': v,
        },
        v
      )
    },
    set gray800(v: string) {
      setBodyProperty(
        {
          '--gray-800': v,
          '--gray-800-darken-5': darken(v, 5),
        },
        v
      )
    },
    set gray900(v: string) {
      setBodyProperty(
        {
          '--gray-900': v,
          '--gray-900-lighten-40': darken(v, -40),
        },
        v
      )
    },
  },
  button: {
    info: {
      title: 'Button 按钮',
      name: 'button',
      path: 'Button',
    },
    conf: [
      {
        name: 'fontSizeBase',
        attr: 'fontSize',
        type: 'number',
        parser: parseInt,
        className: buttonClass('_'),
        desc: '常规按钮字体大小',
      },
      {
        name: 'fontSizeLarge',
        attr: 'fontSize',
        type: 'number',
        parser: parseInt,
        className: buttonClass('large'),
        desc: '大按钮字体大小',
      },
      {
        name: 'fontSizeSmall',
        attr: 'fontSize',
        type: 'number',
        parser: parseInt,
        className: buttonClass('small'),
        desc: '小按钮字体大小',
      },
      {
        name: 'marginLeft',
        attr: 'marginLeft',
        type: 'number',
        parser: parseInt,
        className: exposeClass('button'),
        desc: '连续按钮间距',
      },
      {
        name: 'spinMargin',
        attr: 'marginRight',
        type: 'number',
        parser: parseInt,
        className: buttonClass('spin-ltr'),
        desc: '加载图标与文字间距',
      },
      {
        name: 'paddingBaseHorizontal',
        attr: 'paddingLeft',
        type: 'number',
        parser: parseInt,
        className: buttonClass('_'),
        desc: '常规按钮水平内边距',
      },
      {
        name: 'paddingBaseVertical',
        attr: 'paddingTop',
        type: 'number',
        parser: parseInt,
        className: buttonClass('_'),
        desc: '常规按钮垂直内边距',
      },
      {
        name: 'paddingLargeHorizontal',
        attr: 'paddingLeft',
        type: 'number',
        parser: parseInt,
        className: buttonClass('large'),
        desc: '大按钮水平内边距',
      },
      {
        name: 'paddingLargeVertical',
        attr: 'paddingTop',
        type: 'number',
        parser: parseInt,
        className: buttonClass('large'),
        desc: '大按钮垂直内边距',
      },
      {
        name: 'paddingSmallHorizontal',
        attr: 'paddingLeft',
        type: 'number',
        parser: parseInt,
        className: buttonClass('small'),
        desc: '小按钮水平内边距',
      },
      {
        name: 'paddingSmallVertical',
        attr: 'paddingTop',
        type: 'number',
        parser: parseInt,
        className: buttonClass('small'),
        desc: '小按钮垂直内边距',
      },
      {
        name: 'borderRadius',
        attr: 'borderRadius',
        type: 'number',
        parser: parseInt,
        className: buttonClass('_'),
        desc: '常规按钮圆角',
      },
      {
        name: 'smallBorderRadius',
        attr: 'borderRadius',
        type: 'number',
        parser: parseInt,
        className: buttonClass('small'),
        desc: '小按钮圆角',
      },
      {
        name: 'largeBorderRadius',
        attr: 'borderRadius',
        type: 'number',
        parser: parseInt,
        className: buttonClass('large'),
        desc: '大按钮圆角',
      },
      {
        name: 'disabledBg',
        attr: 'backgroundColor',
        type: 'color',
        className: buttonClass('disabled'),
        desc: '禁用按钮背景色',
      },
      {
        name: 'disabledDelimiter',
        attr: 'borderColor',
        type: 'color',
        className: exposeClass('button-disabled-delimiter'),
        desc: '按钮组禁用状态下分隔符颜色',
      },
      {
        name: 'disabledColor',
        attr: 'color',
        type: 'color',
        className: buttonClass('disabled'),
        desc: '禁用按钮文字颜色',
      },
      {
        name: 'disabledBorderColor',
        attr: 'borderColor',
        type: 'color',
        className: buttonClass('disabled'),
        desc: '禁用按钮边框颜色',
      },
      {
        name: 'buttonDefaultTextColor',
        attr: 'color',
        type: 'color',
        className: buttonClass('default'),
        desc: '默认样式下文字颜色',
      },
      {
        name: 'buttonDefaultBorderColor',
        attr: 'borderColor',
        type: 'color',
        className: buttonClass('default'),
        desc: '默认样式下边框颜色',
      },
    ],
    set fontSizeBase(v: string) {
      setBodyProperty(
        {
          '--button-font-size-base': `${parseInt(v, 10)}px`,
        },
        v
      )
    },
    set fontSizeLarge(v: string) {
      setBodyProperty(
        {
          '--button-font-size-large': `${parseInt(v, 10)}px`,
        },
        v
      )
    },
    set fontSizeSmall(v: string) {
      setBodyProperty(
        {
          '--button-font-size-small': `${parseInt(v, 10)}px`,
        },
        v
      )
    },
    set spinMargin(v: string) {
      setBodyProperty(
        {
          '--button-spin-margin': `${parseInt(v, 10)}px`,
        },
        v
      )
    },
    set marginLeft(v: string) {
      setBodyProperty(
        {
          '--button-margin-left': `${parseInt(v, 10)}px`,
        },
        v
      )
    },
    set borderRadius(v: string) {
      setBodyProperty(
        {
          '--button-border-radius': `${parseInt(v, 10)}px`,
        },
        v
      )
    },
    set smallBorderRadius(v: string) {
      setBodyProperty(
        {
          '--button-small-border-radius': `${parseInt(v, 10)}px`,
        },
        v
      )
    },
    set largeBorderRadius(v: string) {
      setBodyProperty(
        {
          '--button-large-border-radius': `${parseInt(v, 10)}px`,
        },
        v
      )
    },
    set paddingBaseHorizontal(v: string) {
      setBodyProperty(
        {
          '--button-padding-base-horizontal': `${parseInt(v, 10)}px`,
          '--button-padding-base-horizontal-7': `${parseInt(v, 10) * 0.7}px`,
        },
        v
      )
    },
    set paddingLargeHorizontal(v: string) {
      setBodyProperty(
        {
          '--button-padding-large-horizontal': `${parseInt(v, 10)}px`,
        },
        v
      )
    },
    set paddingSmallHorizontal(v: string) {
      setBodyProperty(
        {
          '--button-padding-small-horizontal': `${parseInt(v, 10)}px`,
        },
        v
      )
    },
    set paddingBaseVertical(v: string) {
      setBodyProperty(
        {
          '--button-padding-base-vertical': `${parseInt(v, 10)}px`,
        },
        v
      )
    },
    set paddingLargeVertical(v: string) {
      setBodyProperty(
        {
          '--button-padding-large-vertical': `${parseInt(v, 10)}px`,
        },
        v
      )
    },
    set paddingSmallVertical(v: string) {
      setBodyProperty(
        {
          '--button-padding-small-vertical': `${parseInt(v, 10)}px`,
        },
        v
      )
    },
    set disabledBg(v: string) {
      setBodyProperty(
        {
          '--button-disabled-bg': v,
        },
        v
      )
    },
    set disabledColor(v: string) {
      setBodyProperty(
        {
          '--button-disabled-color': v,
        },
        v
      )
    },
    set disabledBorderColor(v: string) {
      setBodyProperty(
        {
          '--button-disabled-border-color': v,
        },
        v
      )
    },
    set disabledDelimiter(v: string) {
      setBodyProperty(
        {
          '--button-disabled-delimiter': v,
        },
        v
      )
    },
    set buttonDefaultTextColor(v: string) {
      setBodyProperty(
        {
          '--button-default-text-color': v,
        },
        v
      )
    },
    set buttonDefaultBorderColor(v: string) {
      setBodyProperty(
        {
          '--button-default-border': v,
          '--button-default-border-fade-0': fade(v, 0),
          '--button-default-border-fade-60': fade(v, 0.6),
        },
        v
      )
    },
  },
  dropdown: {
    info: {
      title: 'Dropdown 下拉菜单',
      name: 'dropdown',
      path: 'Dropdown',
    },
    conf: [
      {
        name: 'borderWidth',
        attr: 'borderWidth',
        type: 'number',
        parser: parseInt,
        className: exposeClass('dropdown-button'),
        desc: '按钮边框宽度',
      },
      {
        name: 'columnsPadding',
        attr: 'padding',
        type: 'string',
        className: dropdownClass('box-list'),
        desc: '多列平铺的内边距',
      },
      {
        name: 'optionsHoverBgc',
        attr: 'backgroundColor',
        type: 'color',
        className: exposeClass('dropdown-options-hover'),
        desc: 'options hover时背景颜色',
      },
      {
        name: 'optionsHoverColor',
        attr: 'color',
        type: 'color',
        className: exposeClass('dropdown-options-hover'),
        desc: 'options hover时字体颜色',
      },
    ],
    set borderWidth(v: string) {
      setBodyProperty(
        {
          '--dropdown-border-width': `${parseInt(v, 10)}px`,
        },
        v
      )
    },
    set columnsPadding(v: string) {
      setBodyProperty(
        {
          '--dropdown-columns-padding': v,
        },
        v
      )
    },
    set optionsHoverBgc(v: string) {
      setBodyProperty(
        {
          '--dropdown-options-hover-bgc': v,
        },
        v
      )
    },
    set optionsHoverColor(v: string) {
      setBodyProperty(
        {
          '--dropdown-options-hover-color': v,
        },
        v
      )
    },
  },
  form: {
    info: {
      title: 'Form 表单',
      name: 'form',
      path: 'Form',
    },
    conf: [
      {
        name: 'itemMarginBottom',
        className: formClass('item'),
        attr: 'marginBottom',
        type: 'number',
        parser: parseInt,
        desc: '条目垂直间隔',
      },
      {
        name: 'itemMarginRight',
        className: exposeClass('form-inline'),
        attr: 'marginRight',
        type: 'number',
        parser: parseInt,
        desc: '条目水平间隔',
      },
      {
        name: 'tipColor',
        className: exposeClass('form-tip'),
        attr: 'color',
        type: 'color',
        desc: '提示文字颜色',
      },
      {
        name: 'labelHorizontalAlign',
        className: exposeClass('form-label'),
        attr: 'textAlign',
        type: ['start', 'center', 'end'],
        desc: '标签对齐方式',
      },
      {
        name: 'formTipFontSize',
        className: exposeClass('form-tip'),
        attr: 'fontSize',
        type: 'number',
        parser: parseInt,
        desc: '提示信息字体大小',
      },
      {
        name: 'formErrorLineHeight',
        className: exposeClass('form-error'),
        attr: 'lineHeight',
        type: 'number',
        parser: parseFloat,
        desc: '校验错误文字行高',
      },
      {
        name: 'formErrorMarginTop',
        className: exposeClass('form-error'),
        attr: 'marginTop',
        type: 'number',
        parser: parseInt,
        desc: '校验错误文字顶部间距',
      },
      {
        name: 'formErrorMarginBottom',
        className: exposeClass('form-error'),
        attr: 'marginBottom',
        type: 'number',
        parser: parseInt,
        desc: '校验错误文字底部间距',
      },
      {
        name: 'formKeepErrorHeight',
        className: exposeClass('form-keep-error'),
        attr: 'min-height',
        type: 'number',
        parser: parseInt,
        desc: '错误提示不撑开表单高度时的最小间距',
      },
    ],
    set itemMarginBottom(v: string) {
      setBodyProperty(
        {
          '--form-item-margin-bottom': `${parseInt(v, 10)}px`,
        },
        v
      )
    },
    set itemMarginRight(v: string) {
      setBodyProperty(
        {
          '--form-item-margin-right': `${parseInt(v, 10)}px`,
        },
        v
      )
    },
    set tipColor(v: string) {
      setBodyProperty(
        {
          '--form-tip-color': v,
        },
        v
      )
    },
    set labelHorizontalAlign(v: string) {
      setBodyProperty(
        {
          '--form-item-label-align': v,
        },
        v
      )
    },
    set formTipFontSize(v: string) {
      setBodyProperty(
        {
          '--form-tip-font-size': `${parseInt(v, 10)}px`,
        },
        v
      )
    },
    set formErrorLineHeight(v: string) {
      setBodyProperty(
        {
          '--form-item-error-line-height': `${parseInt(v, 10)}px`,
        },
        v
      )
    },
    set formErrorMarginTop(v: string) {
      setBodyProperty(
        {
          '--form-item-error-margin-top': `${parseInt(v, 10)}px`,
        },
        v
      )
    },
    set formErrorMarginBottom(v: string) {
      setBodyProperty(
        {
          '--form-item-error-margin-bottom': `${parseInt(v, 10)}px`,
        },
        v
      )
    },
    set formKeepErrorHeight(v: string) {
      setBodyProperty(
        {
          '--form-Item-min-keep-height': `${parseInt(v, 10)}px`,
        },
        v
      )
    },
  },
  checkbox: {
    info: {
      title: 'Checkbox 复选框',
      name: 'checkbox',
      path: 'Checkbox',
    },
    conf: [
      {
        name: 'marginRight',
        className: checkinputClass('_'),
        attr: 'marginRight',
        type: 'number',
        parser: parseInt,
        desc: '水平间隔',
      },
      {
        name: 'borderWidth',
        className: exposeClass('checkbox-indicator'),
        attr: 'width',
        type: 'number',
        parser: parseInt,
        desc: '边框宽度',
      },
      {
        name: 'color',
        className: checkinputClass('_'),
        attr: 'color',
        type: 'color',
        desc: '文字颜色',
      },
      {
        name: 'borderColor',
        className: exposeClass('checkbox-indicator'),
        attr: 'borderColor',
        type: 'color',
        desc: '边框颜色',
      },
      {
        name: 'textPaddingX',
        className: exposeClass('checkbox-text'),
        attr: 'paddingRight',
        type: 'number',
        parser: parseInt,
        desc: '文字水平内间距',
      },
      {
        name: 'indicatorBorderRadius',
        className: exposeClass('checkbox-indicator'),
        attr: 'borderRadius',
        type: 'number',
        parser: parseInt,
        min: 3,
        desc: '圆角',
      },
      {
        name: 'checkboxDisabledBgc',
        className: exposeClass('checkbox-disabled'),
        attr: 'backgroundColor',
        type: 'color',
        desc: 'Checkbox 和 Radio 未选中状态禁用后的背景色',
      },
      {
        name: 'checkboxCheckedDisabledBgc',
        className: exposeClass('checkbox-checked-disabled'),
        attr: 'backgroundColor',
        type: 'color',
        desc: 'Checkbox 和 Radio 选中状态下禁用后的背景色',
      },
    ],
    set marginRight(v: string) {
      setBodyProperty(
        {
          '--checkbox-margin-right': `${parseInt(v, 10)}px`,
        },
        v
      )
    },
    set color(v: string) {
      setBodyProperty(
        {
          '--checkinput-color': v,
        },
        v
      )
    },
    set borderColor(v: string) {
      setBodyProperty(
        {
          '--checkbox-border-color': v,
        },
        v
      )
    },
    set borderWidth(v: string) {
      setBodyProperty(
        {
          '--checkbox-border-width': `${parseInt(v, 10)}px`,
        },
        v
      )
    },
    set textPaddingX(v: string) {
      setBodyProperty(
        {
          '--checkbox-text-padding-x': `${parseInt(v, 10)}px`,
        },
        v
      )
    },
    set indicatorBorderRadius(v: string) {
      setBodyProperty(
        {
          '--checkbox-indicator-border-radius': `${parseInt(v, 10)}px`,
        },
        v
      )
    },
    set checkboxDisabledBgc(v: string) {
      setBodyProperty(
        {
          '--checkbox-disabled-bgc': v,
        },
        v
      )
    },
    set checkboxCheckedDisabledBgc(v: string) {
      setBodyProperty(
        {
          '--checkbox-checked-disabled-bgc': v,
        },
        v
      )
    },
  },
  radio: {
    info: {
      title: 'Radio 单选框',
      name: 'radio',
      path: 'Radio',
    },
    conf: [
      {
        name: 'size',
        className: exposeClass('radio'),
        attr: 'width',
        type: 'number',
        parser: parseInt,
        min: 0,
        max: 40,
        desc: '尺寸',
      },
      {
        name: 'borderWidth',
        className: exposeClass('radio'),
        attr: 'borderWidth',
        type: 'number',
        parser: parseInt,
        min: 0,
        max: 10,
        desc: '选中的边框宽度',
      },
      {
        name: 'innerWidth',
        className: exposeClass('radio-inner'),
        attr: 'width',
        type: 'number',
        parser: parseInt,
        min: 0,
        max: 10,
        desc: '选中点尺寸',
      },
      {
        name: 'uncheckBorderWidth',
        className: exposeClass('radio-uncheck'),
        attr: 'width',
        type: 'number',
        parser: parseInt,
        min: 0,
        desc: '未选中边框宽度',
      },
      {
        name: 'color',
        className: exposeClass('radio'),
        attr: 'color',
        type: 'color',
        desc: '文字颜色',
      },
    ],
    set size(v: string) {
      setBodyProperty(
        {
          '--radio-width': `${parseInt(v, 10)}px`,
        },
        v
      )
    },
    set borderWidth(v: string) {
      setBodyProperty(
        {
          '--radio-border-width': `${parseInt(v, 10)}px`,
        },
        v
      )
    },
    set innerWidth(v: string) {
      setBodyProperty(
        {
          '--radio-inner-width': `${parseInt(v, 10)}px`,
        },
        v
      )
    },
    set uncheckBorderWidth(v: string) {
      setBodyProperty(
        {
          '--radio-border-uncheck-width': `${parseInt(v, 10)}px`,
        },
        v
      )
    },
    set color(v: string) {
      setBodyProperty(
        {
          '--radio-text-color': v,
        },
        v
      )
    },
  },
  input: {
    info: {
      title: 'Input 输入框',
      name: 'input',
      path: 'Input',
    },
    conf: [
      {
        name: 'color',
        className: inputClass('_'),
        attr: 'color',
        type: 'color',
        desc: '文字颜色',
      },
      {
        name: 'borderRadius',
        className: inputClass('_'),
        attr: 'borderRadius',
        type: 'number',
        parser: parseInt,
        desc: '圆角',
      },
      {
        name: 'underlineHeight',
        className: inputClass('_', 'underline'),
        attr: 'borderBottomWidth',
        type: 'number',
        parser: parseInt,
        desc: '下边框宽度(仅在下边框模式生效)',
      },
      {
        name: 'dropdownBorderRadius',
        className: datepickerClass('picker'),
        attr: 'borderRadius',
        type: 'number',
        parser: parseInt,
        desc: '下拉框圆角，例如Select Options',
      },
      {
        name: 'focusWidth',
        className: inputClass('focus'),
        attr: 'boxShadow',
        type: 'number',
        max: 20,
        parser: (v: string) => parseInt(v.split(' ').pop()!, 10),
        desc: '聚焦发散光宽度',
      },
      {
        name: 'disabledBg',
        className: inputClass('disabled'),
        attr: 'backgroundColor',
        type: 'color',
        desc: '禁用背景色',
      },
      {
        name: 'disabledColor',
        className: inputClass('disabled'),
        attr: 'color',
        type: 'color',
        desc: '禁用字体色',
      },
      {
        name: 'borderColor',
        className: inputClass('_'),
        attr: 'borderColor',
        type: 'color',
        desc: '边框颜色',
      },
      {
        name: 'borderHoverColor',
        className: exposeClass('input-focus'),
        attr: 'borderColor',
        type: 'color',
        desc: '鼠标悬浮、聚焦时的边框色',
      },
      {
        name: 'placeholderColor',
        className: exposeClass('input-placeholder'),
        attr: 'color',
        type: 'color',
        desc: '占位文字颜色',
      },
      {
        name: 'placeholderSize',
        className: exposeClass('input-placeholder'),
        attr: 'fontSize',
        type: 'number',
        parser: parseInt,
        desc: '占位文字大小',
      },
      {
        name: 'clearBg',
        className: exposeClass('input-clear'),
        attr: 'backgroundColor',
        type: 'color',
        desc: '清空图标背景色',
      },
      {
        name: 'clearHoverBg',
        className: exposeClass('input-clear-hover'),
        attr: 'backgroundColor',
        type: 'color',
        desc: '清空图标鼠标悬浮背景色',
      },
    ],
    set color(v: string) {
      setBodyProperty(
        {
          '--input-text-color': v,
        },
        v
      )
    },
    set borderRadius(v: string) {
      setBodyProperty(
        {
          '--input-border-radius': `${parseInt(v, 10)}px`,
        },
        v
      )
    },
    set underlineHeight(v: string) {
      setBodyProperty(
        {
          '--input-underline-height': `${parseInt(v, 10)}px`,
        },
        v
      )
    },
    set dropdownBorderRadius(v: string) {
      setBodyProperty(
        {
          '--input-dropdown-border-radius': `${parseInt(v, 10)}px`,
        },
        v
      )
    },
    set disabledBg(v: string) {
      setBodyProperty(
        {
          '--input-bg-disabled': v,
        },
        v
      )
    },
    set disabledColor(v: string) {
      setBodyProperty(
        {
          '--input-disabled-color': v,
        },
        v
      )
    },
    set borderColor(v: string) {
      setBodyProperty(
        {
          '--input-border-color': v,
        },
        v
      )
    },
    set borderHoverColor(v: string) {
      setBodyProperty(
        {
          '--input-border-focus-color': v,
          '--input-border-focus-color-fade-25': fade(v, 0.25),
        },
        v
      )
    },
    set focusWidth(v: string) {
      setBodyProperty(
        {
          '--input-focus-width': `${parseInt(v, 10)}px`,
        },
        v
      )
    },
    set placeholderColor(v: string) {
      setBodyProperty(
        {
          '--input-placeholder-color': v,
        },
        v
      )
    },
    set placeholderSize(v: string) {
      setBodyProperty(
        {
          '--input-placeholder-size': `${parseInt(v, 10)}px`,
        },
        v
      )
    },
    set clearBg(v: string) {
      setBodyProperty(
        {
          '--input-clear-bg-color': v,
        },
        v
      )
    },
    set clearHoverBg(v: string) {
      setBodyProperty(
        {
          '--input-clear-bg-hover-color': v,
        },
        v
      )
    },
  },
  select: {
    info: {
      title: 'Select 选择框',
      name: 'select',
      path: 'Select',
    },
    conf: [
      {
        name: 'resultPaddingHorizontal',
        className: exposeClass('select-result-item'),
        attr: 'paddingLeft',
        type: 'number',
        parser: parseInt,
        desc: '选中值水平内边距',
      },
      {
        name: 'resultPaddingVertical',
        className: exposeClass('select-result-item'),
        attr: 'paddingTop',
        type: 'number',
        parser: parseInt,
        desc: '选中值垂直内边距',
      },
      {
        name: 'itemColor',
        className: selectClass('option'),
        attr: 'color',
        type: 'color',
        desc: '选项文字颜色',
      },
      {
        name: 'itemBgColor',
        className: selectClass('option'),
        attr: 'backgroundColor',
        type: 'color',
        desc: '选项背景颜色',
      },
      {
        name: 'disabledBg',
        className: selectClass('option', 'disabled'),
        attr: 'backgroundColor',
        type: 'color',
        desc: '禁用选项背景色',
      },
      {
        name: 'disabledColor',
        className: selectClass('option', 'disabled'),
        attr: 'color',
        type: 'color',
        desc: '禁用选项文字颜色',
      },
      {
        name: 'itemActiveBg',
        className: selectClass('active', 'option'),
        attr: 'backgroundColor',
        type: 'color',
        desc: '选中项背景色',
      },
      {
        name: 'itemActiveColor',
        className: selectClass('active', 'option'),
        attr: 'color',
        type: 'color',
        desc: '选中项文字颜色',
      },
      {
        name: 'itemHoverBg',
        className: exposeClass('select-option-hover'),
        attr: 'backgroundColor',
        type: 'color',
        desc: '选项鼠标悬浮背景色',
      },
      {
        name: 'itemHoverColor',
        className: exposeClass('select-option-hover'),
        attr: 'color',
        type: 'color',
        desc: '选项鼠标悬浮文字颜色',
      },
      {
        name: 'compressedMoreHoverBg',
        className: exposeClass('select-compressed'),
        attr: 'backgroundColor',
        type: 'color',
        desc: 'compressed模式按钮鼠标悬浮背景色',
      },
      {
        name: 'clearIconBg',
        className: exposeClass('select-close'),
        attr: 'backgroundColor',
        type: 'color',
        desc: '清空按钮背景色',
      },
      {
        name: 'treeDisabledBg',
        className: exposeClass('select-tree-disabled'),
        attr: 'backgroundColor',
        type: 'color',
        desc: '树形选择禁用选项背景色',
      },
      {
        name: 'treeContentColor',
        className: exposeClass('select-tree'),
        attr: 'color',
        type: 'color',
        desc: '树形选择可点击选项文字颜色',
      },
      {
        name: 'treeDisableContentColor',
        className: exposeClass('select-tree-disabled'),
        attr: 'color',
        type: 'color',
        desc: '树形选择禁用选项文字颜色',
      },
      {
        name: 'treeIconHoverBg',
        className: exposeClass('select-tree-icon-hover'),
        attr: 'backgroundColor',
        type: 'color',
        desc: '树形选择展开箭头背景色',
      },
      {
        name: 'treeNodeHoverBg',
        className: exposeClass('select-tree-node-hover'),
        attr: 'backgroundColor',
        type: 'color',
        desc: '树形选择节点hover状态背景色',
      },
      {
        name: 'treeNodeHoverColor',
        className: exposeClass('select-tree-node-hover'),
        attr: 'color',
        type: 'color',
        desc: '树形选择节点hover状态文字颜色',
      },
      {
        name: 'treeNodeSelectedBg',
        className: exposeClass('select-tree-node-selected'),
        attr: 'backgroundColor',
        type: 'color',
        desc: '树形选择节点选中状态背景色',
      },
      {
        name: 'treeNodeSelectedColor',
        className: exposeClass('select-tree-node-selected'),
        attr: 'color',
        type: 'color',
        desc: '树形选择节点选中状态文字颜色',
      },
    ],
    set resultPaddingVertical(v: string) {
      setBodyProperty(
        {
          '--select-result-padding-vertical': `${parseInt(v, 10)}px`,
        },
        v
      )
    },
    set resultPaddingHorizontal(v: string) {
      setBodyProperty(
        {
          '--select-result-padding-horizontal': `${parseInt(v, 10)}px`,
          '--select-result-padding-horizontal-16': `${parseInt(v, 10) + 16}px`,
        },
        v
      )
    },
    set itemColor(v: string) {
      setBodyProperty(
        {
          '--select-option-color': v,
        },
        v
      )
    },
    set itemBgColor(v: string) {
      setBodyProperty(
        {
          '--select-option-bg-color': v,
        },
        v
      )
    },
    set disabledBg(v: string) {
      setBodyProperty(
        {
          '--select-disabled-bg-color': v,
        },
        v
      )
    },
    set disabledColor(v: string) {
      setBodyProperty(
        {
          '--select-disabled-color': v,
        },
        v
      )
    },
    set itemActiveBg(v: string) {
      setBodyProperty(
        {
          '--select-item-active-bg': v,
        },
        v
      )
    },
    set itemActiveColor(v: string) {
      setBodyProperty(
        {
          '--select-item-active-color': v,
        },
        v
      )
    },
    set itemHoverBg(v: string) {
      setBodyProperty(
        {
          '--select-option-hover-bg': v,
        },
        v
      )
    },
    set itemHoverColor(v: string) {
      setBodyProperty(
        {
          '--select-option-hover-color': v,
        },
        v
      )
    },
    set compressedMoreHoverBg(v: string) {
      setBodyProperty(
        {
          '--select-compressed-hover-bg': v,
        },
        v
      )
    },
    set clearIconBg(v: string) {
      setBodyProperty(
        {
          '--select-clear-bg-color': v,
        },
        v
      )
    },
    set treeDisabledBg(v: string) {
      setBodyProperty(
        {
          '--select-tree-disabled-bg-color': v,
        },
        v
      )
    },

    set treeContentColor(v: string) {
      setBodyProperty(
        {
          '--select-tree-content-color': v,
        },
        v
      )
    },

    set treeDisableContentColor(v: string) {
      setBodyProperty(
        {
          '--select-tree-disabled-content-color': v,
        },
        v
      )
    },

    set treeIconHoverBg(v: string) {
      setBodyProperty(
        {
          '--select-tree-icon-hover-bg-color': v,
        },
        v
      )
    },
    set treeNodeHoverBg(v: string) {
      setBodyProperty(
        {
          '--select-tree-node-hover-bg': v,
        },
        v
      )
    },
    set treeNodeHoverColor(v: string) {
      setBodyProperty(
        {
          '--select-tree-node-hover-color': v,
        },
        v
      )
    },
    set treeNodeSelectedBg(v: string) {
      setBodyProperty(
        {
          '--select-tree-node-selected-bg': v,
        },
        v
      )
    },
    set treeNodeSelectedColor(v: string) {
      setBodyProperty(
        {
          '--select-tree-node-selected-color': v,
        },
        v
      )
    },
  },
  datepicker: {
    info: {
      title: 'Datepicker 日期选择',
      name: 'datepicker',
      path: 'Datepicker',
    },
    conf: [
      {
        name: 'rectBorderRadius',
        className: exposeClass('datepicker-month-item'),
        attr: 'borderRadius',
        type: 'number',
        parser: parseInt,
        desc: '年份、月份选中项圆角',
      },
      {
        name: 'dayHoverBgc',
        className: exposeClass('datepicker-day-hover-bgc'),
        attr: 'backgroundColor',
        type: 'color',
        desc: 'day hover时背景颜色',
      },
    ],
    set rectBorderRadius(v: string) {
      setBodyProperty(
        {
          '--datepicker-rect-active-border-radius': `${parseInt(v, 10)}px`,
        },
        v
      )
    },
    set dayHoverBgc(v: string) {
      setBodyProperty(
        {
          '--datepicker-day-hover-bgc': v,
        },
        v
      )
    },
  },
  slider: {
    info: {
      title: 'Slider 滑块',
      name: 'slider',
      path: 'Slider',
    },
    conf: [
      {
        name: 'indicatorBg',
        className: exposeClass('slider-indicator'),
        attr: 'backgroundColor',
        type: 'color',
        desc: '滑块背景色',
      },
      {
        name: 'indicatorSize',
        className: exposeClass('slider-indicator'),
        attr: 'width',
        type: 'number',
        min: 8,
        max: 40,
        parser: parseInt,
        desc: '滑块尺寸',
      },
      {
        name: 'indicatorBoxShadow',
        className: exposeClass('slider-indicator'),
        attr: 'boxShadow',
        type: 'string',
        desc: '滑块阴影',
      },
      {
        name: 'barBg',
        className: exposeClass('slider-bar'),
        attr: 'backgroundColor',
        type: 'color',
        desc: '滑动条背景色',
      },
      {
        name: 'disabledBarBg',
        className: exposeClass('slider-bar-disabled'),
        attr: 'backgroundColor',
        type: 'color',
        desc: '滑动条禁用背景色',
      },
      {
        name: 'disabledIndicatorBorder',
        className: exposeClass('slider-indicator-disabled'),
        attr: 'borderColor',
        type: 'color',
        desc: '禁用状态下滑块边框色',
      },
      {
        name: 'disabledIndicatorBg',
        className: exposeClass('slider-indicator-disabled'),
        attr: 'background',
        type: 'color',
        desc: '禁用状态下滑块边背景色',
      },
      {
        name: 'height',
        className: sliderClass('background'),
        attr: 'height',
        type: 'number',
        parser: parseInt,
        desc: '滑动条高度',
      },
      {
        name: 'borderRadius',
        className: sliderClass('background'),
        attr: 'borderRadius',
        type: 'number',
        parser: parseInt,
        desc: '滑动条圆角',
      },
      {
        name: 'valueBottom',
        className: exposeClass('slider-value'),
        attr: 'height',
        type: 'number',
        parser: parseInt,
        desc: '当前值距离滑块距离',
      },
    ],
    set indicatorBg(v: string) {
      setBodyProperty(
        {
          '--slider-indicator-bg': v,
        },
        v
      )
    },
    set indicatorSize(v: string) {
      setBodyProperty(
        {
          '--slider-indicator-size': `${parseInt(v, 10)}px`,
          '--slider-indicator-size-half': `${parseInt(v, 10) / 2}px`,
        },
        v
      )
    },
    set indicatorBoxShadow(v: string) {
      setBodyProperty(
        {
          '--slider-indicator-box-shadow': v,
        },
        v
      )
    },
    set barBg(v: string) {
      setBodyProperty(
        {
          '--slider-bar-color': v,
        },
        v
      )
    },
    set disabledBarBg(v: string) {
      setBodyProperty(
        {
          '--slider-disabled-bar-bg': v,
        },
        v
      )
    },
    set disabledIndicatorBorder(v: string) {
      setBodyProperty(
        {
          '--slider-disbaled-indicator-border-color': v,
        },
        v
      )
    },
    set disabledIndicatorBg(v: string) {
      setBodyProperty(
        {
          '--slider-disbaled-indicator-bg': v,
        },
        v
      )
    },
    set height(v: string) {
      setBodyProperty(
        {
          '--slider-bar-height': `${parseInt(v, 10)}px`,
        },
        v
      )
    },
    set borderRadius(v: string) {
      setBodyProperty(
        {
          '--slider-border-radius': `${parseInt(v, 10)}px`,
        },
        v
      )
    },
    set valueBottom(v: string) {
      setBodyProperty(
        {
          '--slider-value-bottom': `${parseInt(v, 10)}px`,
        },
        v
      )
    },
  },
  table: {
    info: {
      title: 'Table 表格',
      name: 'table',
      path: 'Table',
    },
    conf: [
      {
        name: 'scrollRatio',
        className: exposeClass('table-scroll-ratio'),
        attr: 'width',
        parser: parseInt,
        type: 'number',
        desc: '滚动速率，仅在 Windows 下有效',
        logic: true,
        max: 500,
      },
      {
        name: 'headBg',
        className: exposeClass('table-head'),
        attr: 'backgroundColor',
        type: 'color',
        desc: '表头背景色',
      },
      {
        name: 'headColor',
        className: exposeClass('table-head'),
        attr: 'color',
        type: 'color',
        desc: '表头文字颜色',
      },
      {
        name: 'bodyBg',
        className: exposeClass('table-body'),
        attr: 'backgroundColor',
        type: 'color',
        desc: '表格内容背景色',
      },
      {
        name: 'rowSpacing',
        className: exposeClass('table-spacing'),
        attr: 'height',
        type: 'number',
        parser: parseInt,
        desc: '行间距',
      },
      {
        name: 'rowBorderRadius',
        className: exposeClass('table-spacing'),
        attr: 'borderRadius',
        type: 'number',
        parser: parseInt,
        desc: '行圆角',
      },
      {
        name: 'headFontWeight',
        className: exposeClass('table-head'),
        attr: 'fontWeight',
        type: 'number',
        max: 900,
        min: 100,
        parser: parseInt,
        desc: '表头字重',
      },
      {
        name: 'borderColor',
        className: exposeClass('table-head'),
        attr: 'borderColor',
        type: 'color',
        desc: '边框颜色',
      },
      {
        name: 'hoverBg',
        className: exposeClass('table-head-hover'),
        attr: 'backgroundColor',
        type: 'color',
        desc: '鼠标悬浮行背景色',
      },
      {
        name: 'selectedBg',
        className: exposeClass('table-selected'),
        attr: 'backgroundColor',
        type: 'color',
        desc: '选中行背景色',
      },
      {
        name: 'textColor',
        className: exposeClass('table'),
        attr: 'color',
        type: 'color',
        desc: '文字颜色',
      },
      {
        name: 'borderRadiusTop',
        className: exposeClass('table-head'),
        attr: 'borderTopLeftRadius',
        type: 'number',
        parser: parseInt,
        desc: '表格头部圆角',
      },
      {
        name: 'headerCellPadding',
        className: exposeClass('table-head'),
        attr: 'padding',
        type: 'string',
        desc: '表头分组内边距',
      },
      {
        name: 'smallCellPadding',
        className: exposeClass('table-small'),
        attr: 'padding',
        type: 'string',
        desc: '紧凑表格单元格内边距',
      },
      {
        name: 'cellPaddingHorizontal',
        className: exposeClass('table-cell'),
        attr: 'paddingLeft',
        type: 'number',
        parser: parseInt,
        desc: '单元格水平内边距',
      },
      {
        name: 'cellPaddingVertical',
        className: exposeClass('table-cell'),
        attr: 'paddingTop',
        type: 'number',
        parser: parseInt,
        desc: '单元格垂直内边距',
      },
      {
        name: 'treeExpandIconMarginRight',
        className: exposeClass('table-tree-expand'),
        attr: 'marginRight',
        type: 'number',
        parser: parseInt,
        desc: '子表格展开/收起按钮距离文字距离',
      },
      {
        name: 'fixedStart',
        className: exposeClass('table-fixed-start'),
        attr: 'backgroundColor',
        type: 'color',
        desc: '固定列渐变色开始颜色',
      },
      {
        name: 'fixedEnd',
        className: exposeClass('table-fixed-end'),
        attr: 'backgroundColor',
        type: 'color',
        desc: '固定列渐变色结束颜色',
      },
      {
        name: 'tableEvenBgc',
        className: exposeClass('table-even'),
        attr: 'backgroundColor',
        type: 'color',
        desc: '偶数行背景颜色',
      },
      {
        name: 'tableOddBgc',
        className: exposeClass('table-odd'),
        attr: 'backgroundColor',
        type: 'color',
        desc: '奇数行背景颜色',
      },
      {
        name: 'marginBottom',
        className: exposeClass('table'),
        attr: 'marginBottom',
        type: 'number',
        parser: parseInt,
        desc: '表格底部外边距',
      },
      {
        name: 'headerTopDivider',
        className: exposeClass('table-head-top'),
        attr: 'borderWidth',
        type: 'number',
        parser: parseInt,
        desc: '无边框表格头部边框线',
      },
    ],
    set scrollRatio(v: number | string) {
      const rate = typeof v === 'number' ? v : parseInt(v, 10)
      configSet('scrollRatio', rate)
      setBodyProperty(
        {
          '--table-scroll-ratio': `${rate}px`,
        },
        v
      )
    },
    set headBg(v: string) {
      setBodyProperty(
        {
          '--table-head-bg': v,
        },
        v
      )
    },
    set hoverBg(v: string) {
      setBodyProperty(
        {
          '--table-hover-bg': v,
        },
        v
      )
    },
    set selectedBg(v: string) {
      setBodyProperty(
        {
          '--table-selected-row-bg': v,
        },
        v
      )
    },
    set headColor(v: string) {
      setBodyProperty(
        {
          '--table-head-color': v,
        },
        v
      )
    },
    set bodyBg(v: string) {
      setBodyProperty(
        {
          '--table-body-bg': v,
        },
        v
      )
    },
    set rowSpacing(v: string) {
      setBodyProperty(
        {
          '--table-row-spacing': `${parseInt(v, 10)}px`,
        }