naive-ui/themes/tusimple/index.js

// Unstable!
// Draft Code!
// Variable Names Will Be Refactored!
import { composite, changeColor } from 'seemly'
import { cB, cE, c } from '../../src/_utils/cssr'
import typedColor from './color'
import cssMute from './const'

const unconfigurableStyle = c([
  cB('card', [
    cE('content', {
      minHeight: '213px',
      maxHeight: '673px',
      overflow: 'auto'
    })
  ]),
  cB('tag', [
    cE('close', {
      borderRadius: '50%'
    }, [
      c('&:hover', {
        backgroundColor: changeColor('#D7DAE0', { alpha: 0.5 })
      }),
      c('&:hover', {
        backgroundColor: changeColor('#D7DAE0', { alpha: 0.25 })
      })
    ])
  ]),
  cB('message', [
    cE('close', [
      c('&:hover', {
        backgroundColor: changeColor('#D7DAE0', { alpha: 0.5 })
      }),
      c('&:active', {
        backgroundColor: changeColor('#D7DAE0', { alpha: 0.25 })
      })
    ])
  ])
])

function tusimpleTheme (naive) {
  naive.unstableConfig = {
    Pagination: {
      inputSize: 'medium'
    },
    DatePicker: {
      timePickerSize: 'medium'
    }
  }
  unconfigurableStyle.mount({
    target: 'naive-ui/tusimple-theme',
    count: false
  })
  const primaryColor = '#4FB233'
  const inputColorDisabled = '#EBEDF0'
  naive.styles.light.override({
    borderRadius: '16px',
    alpha4: '0.2',
    boxShadow2: '0 2px 16px 0 rgba(0,0,0,0.10), 0 0 16px -2px rgba(0,0,0,0.06)',
    borderColor: '#999',
    divider: '#EBEDF0',
    primaryColor: typedColor.normalSuccess,
    primaryColorHover: typedColor.hoverSuccess,
    primaryColorPressed: typedColor.clickSuccess,
    infoColor: typedColor.normalInfo,
    infoColorHover: typedColor.HoverInfo,
    infoColorPressed: typedColor.clickInfo,
    successColor: typedColor.normalSuccess,
    successColorHover: typedColor.hoverSuccess,
    successColorPressed: typedColor.clickSuccess,
    errorColor: typedColor.normalError,
    errorColorHover: typedColor.hoverError,
    errorColorPressed: typedColor.clickError,
    warningColor: typedColor.normalWarning,
    warningColorHover: typedColor.hoverWarning,
    warningColorPressed: typedColor.clickWarning,
    textColor2: '#333',
    tableHeaderColorOverlay: '#EBEDF0',
    inputColorDisabled,
    actionColor: inputColorDisabled,
    optionColorHover: composite(primaryColor, 'rgba(255, 255, 255, .1)'),
    clearIconColor: composite('#FFF', 'rgba(0, 0, 0, .4)')
  })
  const {
    vars
  } = naive.styles.light.base

  naive.styles.light.Button.override({
    textColorWarning: '#333',
    iconSizeTiny: '16px',
    iconSizeSall: '20px',
    iconSizeMedium: '20px',
    iconSizeLarge: '28px',
    borderRadiusTiny: '12px',
    borderRadiusSmall: '16px',
    borderRadiusMedium: '24px',
    borderRadiusLarge: '40px',
    heightTiny: '24px',
    heightSmall: '32px',
    heightMedium: '48px',
    heightLarge: '80px',
    fontSizeTiny: '14px',
    fontSizeSmall: '16px',
    fontSizeMedium: '16px',
    fontSizeLarge: '24px',
    paddingTiny: '0 12px',
    paddingSmall: '0 24px',
    paddingMedium: '0 48px',
    paddingLarge: '0 80px',
    paddingRoundTiny: '0 12px',
    paddingRoundSmall: '0 24px',
    paddingRoundMedium: '0 48px',
    paddingRoundLarge: '0 80px',
    opacityDisabled: '1',
    colorDisabled: '#EBEDF0',
    colorDisabledPrimary: '#EBEDF0',
    colorDisabledInfo: '#EBEDF0',
    colorDisabledSuccess: '#EBEDF0',
    colorDisabledWarning: '#EBEDF0',
    colorDisabledError: '#EBEDF0',
    borderColorDisabled: '#EBEDF0',
    borderColorDisabledPrimary: '#EBEDF0',
    borderColorDisabledInfo: '#EBEDF0',
    borderColorDisabledSuccess: '#EBEDF0',
    borderColorDisabledWarning: '#EBEDF0',
    borderColorDisabledError: '#EBEDF0',
    textColorDisabled: '#CCCCCC',
    textColor1Disabled: '#CCCCCC',
    textColorDisabledInfo: '#CCCCCC',
    textColorDisabledSuccess: '#CCCCCC',
    textColorDisabledWarning: '#CCCCCC',
    textColorDisabledError: '#CCCCCC',
    textColorGhostDisabled: '#D7DAE0',
    textColor1GhostDisabled: '#D7DAE0',
    textColorGhostDisabledInfo: '#D7DAE0',
    textColorGhostDisabledSuccess: '#D7DAE0',
    textColorGhostDisabledWarning: '#D7DAE0',
    textColorGhostDisabledError: '#D7DAE0',
    textColorTextDisabled: '#D7DAE0',
    textColor1TextDisabled: '#D7DAE0',
    textColorTextDisabledInfo: '#D7DAE0',
    textColorTextDisabledSuccess: '#D7DAE0',
    textColorTextDisabledWarning: '#D7DAE0',
    textColorTextDisabledError: '#D7DAE0',
    iconMarginSmall: '8px',
    iconMarginMedium: '8px',
    iconMarginLarge: '12px'
  })
  naive.styles.light.BaseSuffix.override({
    iconSize: '24px',
    arrowSize: '13px',
    arrowBorderWidth: '2px',
    crossColor: vars.closeColor
  })
  naive.styles.light.Input.override({
    heightMedium: '32px',
    fontSizeMedium: '16px',
    paddingLeft: '12px',
    paddingRight: '12px',
    paddingIcon: '44px',
    iconSize: '24px',
    borderHover: `1px solid ${primaryColor}`,
    borderFocus: `1px solid ${primaryColor}`,
    border: 'none',
    borderDisabled: 'none'
  })
  naive.styles.light.InputGroupLabel.override({
    boxShadow: 'none'
  })
  naive.styles.light.InputNumber.override({
    boxShadow: 'none',
    borderColor: 'none',
    borderColorHover: vars.primaryColor,
    buttonTextColor: 'rgba(0, 0, 0, .6)',
    buttonTextColorHover: vars.primaryColor,
    widthSmall: '140px',
    widthMedium: '140px',
    widthLarge: '140px',
    heightMedium: '32px',
    fontSizeMedium: '16px',
    buttonWidthSmall: '28px',
    buttonWidthMedium: '32px',
    buttonWidthLarge: '40px',
    buttonFontSizeSmall: '16px',
    buttonFontSizeMedium: '24px',
    buttonFontSizeLarge: '24px'
  })
  naive.styles.light.BaseSelectMenu.override({
    boxShadow: vars.boxShadow2,
    paddingSmall: '4px 0',
    paddingMedium: '6px 0',
    paddingLarge: '6px 0',
    paddingHuge: '8px 0'
  })
  naive.styles.light.BaseSelection.override({
    heightMedium: '32px',
    fontSizeMedium: '16px',
    paddingSingle: '0 36px 0 12px',
    borderColor: 'transparent'
  })
  naive.styles.light.Tag.override({
    borderRadius: '16px',
    borderColor: 'transparent',
    color: 'rgba(153,153,153,0.10)',
    closeColor: vars.closeColorOverlay,
    closeColorHover: vars.closeColorOverlay,
    closeColorPressed: vars.closeColorOverlay,
    borderColorPrimary: 'transparent',
    closeColorPrimary: vars.closeColorOverlay,
    closeColorHoverPrimary: vars.closeColorOverlay,
    closeColorPressedPrimary: vars.closeColorOverlay,
    borderColorInfo: 'transparent',
    borderColorSuccess: 'transparent',
    borderColorWarning: 'transparent',
    borderColorError: 'transparent',
    padding: '0 12px',
    closeMargin: '0 0 0 8px',
    heightMedium: '24px',
    closeSizeSmall: '20px',
    closeSizeMedium: '20px',
    closeSizeLarge: '20px',
    fontSizeSmall: '12px',
    fontSizeMedium: '16px',
    fontSizeLarge: '16px'
  })
  naive.styles.light.DynamicTags.override({
    addHeight: '24px',
    addBorderStyle: 'dashed'
  })
  naive.styles.light.Form.override({
    blankHeightSmall: cssMute.CONTENT_SPACE,
    blankHeightMedium: cssMute.CONTENT_SPACE,
    blankHeightLarge: cssMute.CONTENT_SPACE,
    feedbackHeightSmall: cssMute.CONTENT_SPACE,
    feedbackHeightMedium: cssMute.CONTENT_SPACE,
    feedbackHeightLarge: cssMute.CONTENT_SPACE,
    feedbackFontSizeSmall: cssMute.SMALL_FRONT_SIZE,
    feedbackFontSizeMedium: cssMute.SMALL_FRONT_SIZE,
    feedbackFontSizeLarge: cssMute.SMALL_FRONT_SIZE,
    labelFontSizeLeftSmall: cssMute.SMALL_FRONT_SIZE,
    labelFontSizeLeftMedium: cssMute.SMALL_FRONT_SIZE,
    labelFontSizeLeftLarge: cssMute.NORMAL_FRONT_SIZE,
    labelFontSizeTopSmall: cssMute.SMALL_FRONT_SIZE,
    labelFontSizeTopMedium: cssMute.SMALL_FRONT_SIZE,
    labelFontSizeTopLarge: cssMute.NORMAL_FRONT_SIZE,
    labelHeightSmall: '22px',
    labelHeightMedium: '22px',
    labelHeightLarge: '22px',
    labelTextAlignHorizontal: 'left'
  })
  naive.styles.light.Message.override({
    height: '48px',
    padding: '0 20px 0 12px',
    paddingClosable: '0 12px',
    maxWidth: '720px',
    minWidth: '420px',
    iconMargin: '20px',
    closeMargin: '0 0 0 22px',
    colorInfo: vars.warningColor,
    colorWarning: vars.errorColor,
    iconColorInfo: 'rgb(0, 0, 0)',
    iconColorSuccess: 'rgb(255, 255, 255)',
    iconColorWarning: 'rgb(255, 255, 255)',
    iconColorError: 'rgb(255, 255, 255)',
    iconColorLoading: 'rgb(255, 255, 255)',
    closeColorInfo: 'rgb(0, 0, 0)',
    closeColorHoverInfo: 'rgb(0, 0, 0)',
    closeColorPressedInfo: 'rgb(0, 0, 0)',
    closeColorSuccess: 'rgb(255, 255, 255)',
    closeColorHoverSuccess: 'rgb(255, 255, 255)',
    closeColorPressedSuccess: 'rgb(255, 255, 255)',
    closeColorError: 'rgb(255, 255, 255)',
    closeColorHoverError: 'rgb(255, 255, 255)',
    closeColorPressedError: 'rgb(255, 255, 255)',
    closeColorWarning: 'rgb(255, 255, 255)',
    closeColorHoverWarning: 'rgb(255, 255, 255)',
    closeColorPressedWarning: 'rgb(255, 255, 255)',
    closeColorLoading: 'rgb(0, 0, 0)',
    closeColorHoverLoading: 'rgb(0, 0, 0)',
    closeColorActiveLoading: 'rgb(0, 0, 0)',
    closeColor: 'transparent',
    closeColorHover: composite('#D7DAE0', 'rgba(255, 255, 255, .5)'),
    closeColorActive: composite('#D7DAE0', 'rgba(255, 255, 255, .25)'),
    closeSize: '20px',
    iconSize: '20px'
  })
  naive.styles.light.Pagination.override({
    itemSize: '32px',
    itemPadding: 0,
    buttonFontSize: '24px',
    itemFontSize: '16px',
    inputWidth: '80px',
    selectWidth: '100px',
    inputMargin: '0 20px',
    itemMargin: '0 20px 0 0',
    itemBorder: 'none',
    itemBorderActive: 'none',
    itemBorderDisabled: 'none',
    itemColor: 'transparent',
    itemColorHover: composite(vars.primaryColor, 'rgba(255, 255, 255, 0.9)'),
    itemColorActive: 'transparent',
    itemColorDisabled: 'transparent',
    itemBorderRadius: '100px',
    itemTextColorHover: vars.textColor2,
    itemTextColorDisabled: '#D7DAE0',
    buttonBorder: 'none',
    buttonIconColorHover: vars.primaryColor
  })
  naive.styles.light.BackTop.override({
    width: '48px',
    height: '48px',
    iconSize: '24px',
    borderRadius: '24px',
    iconColor: 'rgba(0, 0, 0, .8)',
    iconColorHover: vars.primaryColor,
    iconColorPressed: vars.primaryColorPressed,
    boxShadow: '0 40px 16px -24px rgba(0,0,0,0.04), 0 8px 16px -8px rgba(0,0,0,0.12), 0 16px 40px 16px rgba(0,0,0,0.04)',
    boxShadowHover: '0 40px 16px -24px rgba(0,0,0,0.04), 0 8px 16px -8px rgba(0,0,0,0.12), 0 16px 40px 16px rgba(0,0,0,0.04)',
    boxShadowPressed: '0 40px 16px -24px rgba(0,0,0,0.04), 0 8px 16px -8px rgba(0,0,0,0.12), 0 16px 40px 16px rgba(0,0,0,0.04)'
  })
  naive.styles.light.Breadcrumb.override({
    fontSize: '16px',
    fontWeightActive: '500'
  })
  naive.styles.light.DatePicker.override({
    itemBorderRadius: '14px',
    panelHeaderDividerColor: 'transparent',
    panelDayDividerColor: 'transparent',
    panelArrowButtonColor: '#CCC',
    itemFontSize: '16px',
    panelDayFontSize: '16px',
    panelMonthFontSize: '16px',
    panelActionPadding: '12px 20px',
    itemSize: '28px',
    itemSpaceWidth: '40px',
    itemSpaceHeight: '34px',
    panelMonthPadding: '0 8px 8px 8px',
    panelMonthHeight: '32px',
    panelDatePaddingDate: '12px 16px 9px 16px',
    panelDatePaddingDateTime: '6px 16px 9px 16px',
    panelArrowButtonSize: '24px',
    panelHeaderPadding: '12px 20px 8px 20px',
    panelVerticalDividerColor: 'transparent'
  })
  naive.styles.light.TimePicker.override({
    itemFontSize: '16px',
    itemHeight: '38px',
    itemWidth: '66px',
    panelActionPadding: '12px 20px'
  })
  naive.styles.light.Progress.override({
    railHeight: '4px',
    fontSizeCircle: '24px',
    iconSizeCircle: '30px',
    iconSizeLine: '20px',
    iconColor: typedColor.normalWarning,
    iconColorInfo: typedColor.normalWarning,
    iconColorSuccess: typedColor.normalSuccess,
    iconColorWarning: typedColor.normalError,
    iconColorError: typedColor.normalError
  })
}

tusimpleTheme.install = tusimpleTheme

export default tusimpleTheme